DOM基本操作（一：对节点属性和内容的操作）

一、获取和修改元素间的内容(3种)

　　1.innerHTML 获得/设置元素开始标签和结束标签之间的html原文

　　　　固定套路：1.删除父元素下所有子元素：parent.innerHTML="";

　　　　　　　　　2.批量替换父元素下所有子元素：parent.innerHTML="所有子元素标签组成的html"

　　2.textContent/innerText: 获得开始标签和结束标签之间的文本(去除标签)

　　　　textContent 是DOM标准；innerText 是IE8；

　　3.文本节点内容

　　　　nodeValue

ps:innerHTML和innerText是元素属性而不是方法，使用时后面不要加括号！！

。。。。。。。。。。。。。。。。。。。。。

拓展：

节点的相关属性（只读的）

1） nodeType  属性规定节点的

        nodeType = 1  元素节点   记住

        nodeType = 2  属性节点   记住

        nodeType = 3  文本节点   记住

        nodeType = 8  注释节点

        nodeType = 9  文档

        nodeType = 11   document.fragment

 

2）nodeName 属性规定节点的名称

 

         元素节点  nodeName = 标签的名称

         console.log(elementNode.nodeName);          //会将标签名大写打印出来

         文本节点  nodeName = #text

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

        属性节点  nodeName = 属性的名称

        console.log(attrNode.nodeName);   //attr name

 

3）  nodeValue 属性规定节点的值。

 

        元素节点  nodeValue = undefined 或 null

        文本节点  nodeValue = 文本的内容

        属性节点  nodeValue = 属性的值    对于属性节点nodeValue和value等价

 

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

　　示例：读取并修改元素内容

 

 

二、获取、添加、删除、修改元素属性

ps:这里的属性是html中的标签属性，和行内样式中的属性不是一回事！！

　　getAttribute("属性名")　　获取元素对象指定特性的值

　　setAttribute(name, value)　　设置元素对象指定特性的值

　　removeAttribute('属性名')　　删除元素对象上的指定特性

　　hasAttribute('属性名')　　判断元素对象是否包含指定特性--但是他不能判断属性有没有有效值即是不是空的

<li class="" index="0">导航1</li>

liList[0].hasAttribute('class')---   >true

 

　　node.attributes　　获取元素对象指定特性的集合

　　1.读取属性(4种)

　　　　element.attributes[下标]或者element.attributes['属性名']--->返回属性名加属性值////////element.attributes[下标].value-->只返回属性值

　　　　var value=element.attributes['属性名']

　　　　element.getAttributeNode('属性名').value

　　　　var value=element.getAttribute("属性名")

　　2.修改属性(2种)

　　　　element.setAttribute(name, value);//IE8不支持 只能：element.attributes['属性名']=value

　　　　element.setAttributeNode(attrNode);//属性可以是属性节点

　　　用法示例 ：var atr=document.createAttribute("class");
　　　　　　　　atr.nodeValue="democlass";                                 //先要创建一个属性节点，再把它赋给标签
　　　　　　　　document.getElementsByTagName("H1")[0].setAttributeNode(atr);

　　3.移除属性(2种)

　　　　element.removeAttribute('属性名');

　　　　element.removeAttributeNode(attrNode);

　　4.判断元素是否包含属性(2种)　

　　　　element.hasAttribute('属性名') //true或false

　　　　element.hasAttributes( );

　　5.Property(属性) vs Attribute(HTML特性)

　　　　Property: 对象在内存中存储的属性 可以用 . 访问

　　　　Attribute: 元素对象在开始标签中定义的HTML属性和自定义属性

　　　　访问HTML标准属性时，二者完全一致。如果访问自定义属性时，只能用Attribute。

　　示例：修改元素属性 模拟摇号排序

 

 

 

三、获取和修改元素的样式

　　1.获取或修改内联样式：style对象

　　　　设置：style.属性名="值";　　　

　　　　移出(2种)：
　　　　　　style.属性名="";
　　　　　　style.removeProperty("CSS属性名")

　　　　//仅能操作style属性中定义的内联样式,无法获取或设置样式表中的样式

　　2.获取或修改内联样式表中的属性(3步)

　　　　1. 获得要修改的样式表对象：

　　　　var sheet=document.styleSheets[i];//styleSheets:获得当前网页的所有样式表对象

　　　　2. 获得要修改的cssRule：

　　　　cssRule：样式表中一个大括号就是一个cssRule对象

　　　　var cssRule=sheet.cssRules[i];//cssRule可能嵌套。

　　　　3. 获得cssRule中的属性

　　　　cssRule.style.属性名