DOM节点基本方法和属性

一、DOM（Document Object Model）是由W3C规范

 

已接触标准组织：ECMA  W3C

 已经到DOM4了 ，dom.0是出现规范以前的方法

 

两大阵营：

支持：DOM浏览器（Chrome、Opera、Firefox、Safari）

不支持：IE（6.7.八、360、腾讯遨游等）

 

二、节点：node

 

 

（1）Tree

 

经常使用节点类型：

元素节点：head body 。。。。

属性节点：id maxlength

文本节点：文本内容

 

获取属性：

 

	nodeType	nodeName	nodeValue
元素	1	元素名	null
属性	2	属性名	属性值
文本	3	#text	文本内容

 

 

 

ById  获取的是元素

 

 attr=text.attributes[0]   有个伪数组

 

 

Let  text=title.firstChild;

 

<h1 id="text">文本</h1>

        <script>

            window.onload=function(){

                //元素

              let oText=document.getElementById("text");

              console.log(oText.nodeName);//h1

              console.log(oText.nodeType);//1

              console.log(oText.nodeValue);//null

                //获取属性

              let attr=oText.attributes[0];

              console.log(attr.nodeType);//2

              console.log(attr.nodeName);//id

              console.log(attr.nodeValue);//text

                //获取文本

              let tx=oText.firstChild;

              console.log(tx.nodeType);//3

              console.log(tx.nodeName);//#text

              console.log(tx.nodeValue);//文本

            };

        

        </script>

 

（2） 获取节点方法：（document）

 

一、 document.getElementById   

二、 document.getElementsByTagName  类型不是Array是集合     使用for of 遍历

三、document.getElementsByName   节点里添加name属性和属性值 获取多个

四、document.getElementsByClassName    ps：有兼容问题

 

不考虑ie678的状况下

五、querySelector(“”)      传入选择器    只能找到子元素的第一个

（推荐）六、querySelectorAll           可获取全部子元素

 

“div p[name=elementP]” 属性选择

 

（3）遍历节点：利用父与子，兄弟关系 （父节点.）

 

遍历节点属性：

firstChild 第一个节点

lastChild 最后一个节点

nextSibling 下一个兄弟

previousSibling 上一个兄弟节点

parentNode 父节点

childNodes 全部子节点

 

Ps：注意换行有#text！！！

  

（4）建立节点（方法） （document.）

createElement 建立元素

createAttribute  建立属性

createTextNode  建立文本节点

 

 

（5）增长节点（父节点.）

 

appendChild  往节点的最后添加

 

添加属性：.属性

不一样，className=“color”；

 

insertBefore 往节点的前面添加 （新的，已经存在的） 父.insertBefore（p，d2.firstchild）

 

 

（6）修改节点（父节点.）

 

replaceChild   （新的节点，旧的节点） 父.replaceChild （新的，要替换的）

 

（7）删除节点（父节点.）

 

removeChild

 

 

简化添加步骤： 

 

innerHTML

innerText

 

注意：不是dom标准，可是浏览器都兼容，IE

 

innerHTML:标签不会被解析

 

特色一、返回一个字符串；

特色二、能够直接添加字符串   

 tr.innerHTML=“<P>增长段落</P>”+tr.innerHTML;         

tr.innerHTML+="<P>增长段落</P>";

 

innerText:获取浏览器源码的时候，可使用

 

multiple属性

 

option  selected 获取选中状态