dom编程----认识Node

Dom编程第一步——Node节点的初探

在html中，整个document，标签（Element），文本（Text），注释（Comment），元素的特性（Attr）等 都是节点。

基础：节点的获取

• 通过id获取

·>>getElementById（）

• 通过class类名获取的一个数组

·>>getElementsByClassName（）

• 通过name属性获取的，通常是input

·>>getElementsByName（）

• 通过标签名获取。

·>>getElementsByTagName（）

• 这两个有缺点。获取的节点不是动态的所以一般不用。括号里用css方法选择节点。

querySelector（） 和 querySelectorAll（）。

 

---

节点之间的关系

 

 

    

用处：有点像关系选择器。

 <div id="content">
        <h1>previousSibing相邻上一个</h1>
        <div id="selected">
            
        </div>
        我是一个文本节点nodeType==3
        <span>个</span>
     </div>
    <script>
         var selected = document.getElementById("selected");
         console.log(selected.parentNode);//整个id="content"的div内容
         console.log(selected.nextSibling);//"我是一个文本节点nodeType==3"
         console.log(content.childNodes);//NodeList(7) [text, h1, text, div#selected, text, span, text]
    </script>

*********上面类似关系选择器的东西，并不能让我们任意的访问节点***********

使用childNodes选择子节点会返回一个名叫nodeList的类数组对象。可以通过 someNode.childNode[i]来访问子节点。

---

节点的三大属性

nodeType    nodeValue   nodeName  

Element ：nodeType=1  nodeName的值是大写的标签名 nodeValue的值是null。

Attr ： nodetype=2   nodeName的值是特性的名称 nodeValue的值是特性的值。

Text ：   nodeType=3  nodeName的值是#text# nodeValue的值是节点所包含的文本。

用处：可以通过nodeType和nodeName组合筛选出自己想要的节点

    <div id="box">
        <h1>选出box中的div</h1>
        <div>我是Div，请选中我</div>
        <span>我是span，请不要选我</span>
     </div>
    <script>
       var box = document.getElementById("box");
       for(var i = 0;i<box.childNodes.length;i++){
           var nodeList = box.childNodes;
           if(nodeList[i].nodeName=="DIV"&&nodeList[i].nodeType==1){
               console.log(nodeList[i]);//<div>我是Div，请选中我</div>
            }
       }
    </script>

---

节点的操作

• 增加节点     appendChild（） insertBefore（）

  1.appendChild（）是向节点末尾添加节点。

     var returnedNode = someNode.appendChild(newNode);

2.insertBefore（）是在指定位置添加节点。

     var returnedNode =someNode.insertBefore(newNode,someNode.firstChild)

• 删除节点      removeChild（）

var returnedNode = someNode.removeChild(someNode.firstChild)

 

• 替换（改变）节点      replaceChild（）

var returnedNode = someNode.replaceChild(someNode.firstChild)

• 查找节点

没有直接提供此方法，我们用上文提到的nodeName和nodeType结合查找。

***********其中returnedNode的值是和要插入的值是相等的，someNode节点是要插入的父节点**********