【B/S】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]
  

---

如何为节点添加事件？

---

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

<node>.function(){}

---

如何修改节点？

---

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

<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">
        function(){
            var btn=document.getElementById("btn");

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

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