【JS】节点的增改查

---

【节点的查】如何获得节点？

---

• 获得节点对象

  获得页面中指定id的节点对象

  document.getElementById("id的字符串")；
  

• 获得节点集合

  获得页面中所有标签名符合要求的标签

  document.getElementsByTagName(“标签名”)
  

• 通过父节点获得节点集合

  获得指定父节点下的所有名字符合要求的节点

  父节点.getElementsByTagName(“标签名”)
  

• 获得节点下的子节点

  1、 获得节点下的所有子节点：

  <node>.ChildNodes
  

  2、 获得节点下的第一个子节点：

  <node>.firstChild
  <node>.ChildNodes[0]
  

  3、 获得节点下的最后一个子节点：

  <node>.lastChild
  <node>.ChildNodes[<node>.ChildNodes.lenght-1]
  

---

【节点的增】 如何为节点添加事件？

---

• 创建节点

  元素节点：

  var node=document.createElement(“标签名”);
  

  文本节点：

  var node=document.createTextNode(“文本”);
  

  还有一种可以使用html

  <节点>.innerHTML="文本"；
  

  属性节点：

  <节点>.setAttribute(属性);
  

• 追加节点

  追加到尾部：

  父节点.appendChild(子节点);
  

  插入到某一与元素的前面：

  父节点.insertBefore(新元素，旧元素);
  

---

【节点的改】如何修改节点？

---

所谓的修改节点就是修改节点的属性与包含的文本
修改属性的标准方法：

<node>.setAttribute("属性名",值);
文本 <node>.getAttribute("属性名");

举个例子：

<p id="p"> 我是一个测试的文本 </p>
<textarea id="txt" style="width:400px;height:300px;"> </textarea>
 <br/>
<input type="button" value="点我" id="btn" />

 <script type="text/javascript">
        onload=function(){
            var btn=document.getElementById("btn");

            btn.onclick=function(){
                var txtnode=document.getElementById("txt");
                var txt=txtnode.value;
                var p=document.getElementById("p");
                p.setAttribute("style",txt);
            };
 		}
</script>

显示结果：（第一张是没有添加样式的结果，第二张是在文本框中添加css样式后的结果）

---

如何为节点添加事件？

---

下面以点击事件作为例子（若是用其他事件，将onclick对应替换就可以了）：

<node>.onclick=function(){}