Home >Web Front-end >JS Tutorial >Detailed explanation of the steps to add, delete and modify JavaScript DOM elements

Detailed explanation of the steps to add, delete and modify JavaScript DOM elements

php中世界最好的语言Original: 2018-05-22 14:32:461379browse

This time I will bring you JavaScript A detailed explanation of the steps for adding, deleting, and modifying DOM elements. What are the precautions for adding, deleting, and modifying JavaScript DOM elements? The following is a practical case, let’s take a look.

DOM concept

DOM (Document Object Model): Document Object Model.

You can view it through the Elements tab of the developer tool

You can also observe that the entire document has a series of nodes through the Sources tab of the developer tool

The entire document is composed of A tree composed of a series of node objects.

Node (Node) includes element node (1), attribute node (2), text node (3) (1..2..3..represents the node type)_

var th1= document.getElementById("th1");
alert(th1.nodeType);
alert(th1.nodeName);
alert(th1.nodeValue);

th1 represents an element node (nodeType=1), nodeName is the label name (th), and nodeValue=null of the element node.

var attr1=th1.getAttributeNode("name");
alert(attr1.nodeType);
alert(attr1.nodeName);
alert(attr1.nodeValue);

The getAttributeNode method is to get the attribute node of the element. At this time, the output node type is the attribute node (2), the node name is the attribute name (name), and the node value is the attribute value (sex)

var txtl = th1.firstChild；
alert(txtl.nodeType);
alert(txtl.nodeName);
alert(txtl.nodeValue)

txt1 is a text node (3), the node name is fixed to #text, and the node value is the text content.

Get the element

(1)

getElementByid

Get the element based on the id attribute of the element. What you get is a element.

(2)

getElementsByTagName

Get elements based on the tag name, and the result is a collection of elements.

(3)

getElementsByClassName

Get elements based on the class attribute, and the result is a collection of elements.

(4)

getElementsByName

Get elements based on the name attribute, and the result is a collection of elements.

Summary: Obtaining elements can be obtained based on the tag name, or based on the id, name, and class attributes. The result obtained based on the id attribute is an element, while the other results are a collection.

The document object supports the above four types, while the element object only supports

getElementsByTagName and getElementsByClassName.

Modify elements

(1) Modify content

function fun(){
  //获取到指定元素
  var p1 = document.getElementById("p1");
  p1.innerText = "我被单击了！";
}

The content text of the label can be read or set through the .innerText property

function fun(){
  //获取到指定元素
  var p1 = document.getElementById("p1");
  p1.innerHTML = "我被单击了！<br>换行了";
}

You can also get or set the content text through inner

HTML attributes

The difference between the two: innerHTML will parse the text according to HTML rules, while innerText will just treat it as ordinary text content.

(1) Modify style

A. xxx． style.Attribute name="value"

B. xxx． classname="..." (equivalent to modifying the attributes of class)

<style>
    .style1{
      color:red;
      font-size:20px;
      text-decoration:underline;
    }
    .style2{
      color:blue;
      font-size:32px;
      text-decoration:line-through;
    }
  </style>
</head>
<body>
<p id="p1">修改样式测试</p>
<input type="button"value="样式一"onclick="style1()">
<input type="button"value="样式二"onclick="style2()">
</body>
<script>
  var p1 = document.getElementById("p1");
  function style1(){
    p1.className = "style1"
  }
  function style2(){
    p1.className = "style2"
  }
</script>
</html>

Add and delete elements

(1)

CreateElementCreate an element node

CreateElement("p")Create a paragraph

(2)

createTextNodeCreate a text node

createTextNode("Text Content"), create a text node with a value of "Text Content".

(3)

appendChildAdd child node

(4 )

removeChild Delete child node

Dynamic addition

<body>
<p id="p1">
</p>
<input type="button"value="添加段落"onclick="add()">
</body>
<script>
//全局变量
  var index = 1;
  function add(){
    //创建一个段落标签
    var p = document.createElement("p");
    //创建文本节点
    var content= "第"+index+"段落";
    var txt = document.createTextNode(content);
    //创建文本节点添加的段落
    p.appendChild(txt);
    //将段落添加到p中
    var p1 = document.getElementById("p1");
    p1.appendChild(p);
    index++
  }
</script>

Dynamic deletion

<body>
<p id="p1">
  <p id="p1">第1段落 </p>
  <p id="p2">第2段落 </p>
  <p id="p3">第3段落 </p>
  <p id="p4">第4段落 </p>
</p>
<input type="button"value="删除第二段"onclick="del()">
</body>
<script>
  function del(){
    //先找到父节点
    var p1 = document.getElementById("p1");
    //再找到要删除的节点
    var p2 = document.getElementById("p2");
    //将要删除的节点从父节点中移除
    p1.removeChild(p2);
  }
</script>
</html>

This method The method is to find the parent node and the node to be deleted respectively, and then perform the deletion operation. A prerequisite for this method is to know who the parent node is

So if you don’t know who the parent node is, how to delete it

p2.parentNode.removeChild(p2);

This method does not require who the parent node is

Dynamic addition and deletion:

动态添加和动态删除，删除动态添加的奇数段落

思路1：获取p1 下的所以段落，遍历所以的段落，将序号为奇数的段落删除。

function del(){
  var p1 = document.getElementById("p1");
  var paras = p1.getElementsByTagName("p");
  for(var i in paras){
    if((i+1)%2 == 1){
      p1.removeChild(paras[i]);
    }
  }
}

这种在初始时是可以的,但是随着动态添加或删除的进行，后面的结果就不对了。因为动态删除操作就影响了原来的顺序，而程序是按照序号去判断奇偶性，所以出现误判

思路2：添加通过设置class属性，然后通过getElementsByclassName来获取奇数行

（也可以从后往前删）

<body>
<p id="p1">
</p>
<input type="button" value="添加段落" onclick="add()">
<input type="button" value="删除奇数第二段" onclick="de1()">
</body>
<script>
  var index = 1;
  function add(){
    //创建一个段落标签
    var p = document.createElement("p");
    //创建文本节点
    var content = "第" + index + "段落";
    var txt = document.createTextNode(content);
    //将文本节点添加到段落
    p.appendChild(txt);
    if (index % 2 == 1) {
      p.setAttribute("class","odd");
    }
    //将段落添加到p中
    var p1 = document.getElementById("p1");
    p1.appendChild(p);
    index++;
  }
  /*function de1(){
   var p1 = document.getElementById("p1");
   var paras =p1.getElementsByTagName("p");
   for(var i in paras){
   if((i+1)%2 == 1){
   p1.removeChild(paras[i]);
   }
   }
   }*/
  functionde1() {
    var p1 = document.getElementById("p1");
    var paras = p1.getElementsByClassName("odd");
//    varparas = document.getElementsByName("odd");
    for (var i = paras.length - 1; i >= 0; i--) {
      p1.removeChild(paras[i]);
    }
  }
</script>
</html>

导航

Document：是根节点

ParentNode：获取父节点

childNodes：获取所有子节点

firstChild：第一个子节点

lastChlid：获取最后一个子节点

</head>
<body>
<p name="第一章">
   <p id="p1">第一段<span>第一句</span><span>第二句</span></p>
</p>
<input type="button"value="获取父节点的name属性"onclick="fun1()">
<input type="button"value="显示p1子节点的个数"onclick="fun2()">
<input type="button"value="显示p1第一个子节点的类型"onclick="fun3()">
<input type="button"value="显示p1最后一个子节点的类型"onclick="fun4()">
</body>
<script>
var p1 =document.getElementById("p1");
function fun1(){
  var value=p1.parentNode.getAttribute("name");
  alert(value);
}
function fun2(){
  var chlids = p1.childNodes;
  alert(chlids.length)
}
function fun3(){
  alert(p1.firstChild.nodeType);
}
function fun4(){
  alert(p1.lastChild.nodeType);
}
</script>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Detailed explanation of the steps to add, delete and modify JavaScript DOM elements

Related articles