常用的dom的 *** 作方法

##1.访问/获取节点

document.getElementById(id)//返回对拥有指定id的第一个对象进行访问

document.getElementsByName(name)//返回带有指定名称的节点集合 注意拼写:Elements

document.getElementsByTagName(tagname)//返回带有指定标签名的对象集合　  注意拼写：Elements

document.getElementsByClassName(classname) //返回带有指定class名称的对象集合 注意拼写：Elements

##2.创建节点/属性

document.createElement(eName)//创建一个节点

document.createAttribute(attrName)//对某个节点创建属性

document.createTextNode(text)　//创建文本节点

##3.添加节点

document.insertBefore(newNode,referenceNode)　 //在某个节点前插入节点

parentNode.appendChild(newNode)//给某个节点添加子节点

##4.复制节点

cloneNode(true | false)//复制某个节点  参数：是否复制原节点的所有属性

##5.删除节点

parentNode.removeChild(node)//删除某个节点的子节点 node是要删除的节点

注意：为了保证兼容性，要判断元素节点的节点类型(nodeType)，若nodeType==1，再执行删除 *** 作。通过这个方法，就可以在 IE和 Mozilla 完成正确的 *** 作。

nodeType属性可返回节点的类型.最重要的节点类型是：

元素类型节点类型

元素element        1

属性attr        2

文本text        3

注释comments        8

文档document        9

##6.修改文本节点

方法作用

appendData(data)将data加到文本节点后面

deleteData(start,length)将从start处删除length个字符

insertData(start,data)在start处插入字符,start的开始值是0

replaceData(start,length,data)在start处用data替换length个字符

splitData(offset)在offset处分割文本节点

substringData(start,length)从start处提取length个字符

##7.属性 *** 作

getAttribute(name)//通过属性名称获取某个节点属性的值

setAttribute(name,value) //修改某个节点属性的值

removeAttribute(name)　 //删除某个属性

##8.查找节点

parentObj.firstChild//如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使用 parentObj.firstChild.firstChild.....

parentObj.lastChild//获得一个节点的最后一个节点，与firstChild一样也可以进行递归使用 parentObj.lastChild.lastChild.....

parentObj.childNodes  //获得节点的所有子节点，然后通过循环和索引找到目标节点

##9.获取相邻的节点

curtNode.previousSibling //获取已知节点的相邻的上一个节点

curtNode.nextSlbling // 获取已知节点的下一个节点

##10.获取父节点

childNode.parentNode//得到已知节点的父节点

##11.替换节点

replace(newNode,oldNode)

    1.node.nodeName：查看节点名称（元素节点返回标签名（大写），文本节点返回 #text）

    2.node.nodeType：查看节点类型（元素节点返回1，属性节点返回2，文本节点返回3）

    3.node.nodeValue：查看节点的值（元素节点返回null，文本节点返回文本值）

    DOM对象集合了HTML标签中能被解析的属性（标准属性）作为DOM对象的属性

    查询到的input节点包含了type、name、value等属性，其他未设置值的属性也包含在节点对象中

    1.node.offsetLeft：元素在页面中的水平坐标值

    2.node.offsetTop：元素在页面中的垂直坐标值

    3.node.clientWidth：元素在页面视口区域占据的宽度(不含边框)

    4.node.clientHeight：元素在页面视口区域占据的高度(不含边框)

    5.node.offsetWidth：元素在页面区域占据的宽度(含边框)

    6.offsetHeight：元素在页面区域占据的高度(含边框)

    7.scrollLeft：窗口或者容器内容水平滚动的距离

    8.scrollTop：窗口或者容器内容垂直滚动的距离

融在第三点最后了

    1.方法名.innerHTML（包含了此方法对应的对象内所有空白文本以及标签在内的所有内容）

    2.方法名.innerText（包含了此方法对应的对象内文本内容且空白文本除外）

    1.node.getAttribute()：读取节点的属性值

    2.node.setAttribute（）：设置节点属性值

    3.node.removeAttribute（）：删除节点的属性

    4.node.hasAttribute（）：检测节点是否存在某属性

    1.方法名.querySelector（选择器）：按CSS样式查询，返回第一个节点

    2.node.querySelectorAll(选择器)：按CSS样式查询，返回所有节点集合

    3.node.getElementsByTagName(tname)：查询node下面所有标签名为tname的元素集合

    4.node.getElementsByClassName(cname)：查询node下面所有类名为cname的元素集合

    1.往父节点插入子节点并指定所有元素的后面

        父级方法名.appendChild（插入的元素）  

    2.往父节点插入子节点并指定在某个子元素的前面

        父级方法名.insertBefore（插入的元素，插入的元素后的一个元素名）

    注意：在dom中插入节点都是基于父节点来完成的

    1. 父级方法名.removeChild（子级元素）：删除父级元素中的子级节点

    1.父级方法名.replaceChild（new，old）：将父级元素中的old节点替换成一个新的new节点

    1.浅复制：node.cloneNode()：只复制此元素不包含子元素

    2.深复制：node.cloneNode(true)：复制此元素且包含子元素

    1.父级元素.hasChildNodes() ：检测节点是否含有子节点，包括空白节点    

    1.node.parentNode：node的父节点

    2.node.childNodes ：node所有子节点

    3.node.children：node所有子元素 

    4.node.firstChild：node的第一个子节点

    5.node.firstElementChild：node的第一个子元素 

    6.node.lastChild ：node的最后一个节点

    7.node.lastElementChild：的最后一个元素

    8.node.nextSibling：node的下一个兄弟节点

    9.node.nextElementSibling：node的下一个兄弟元素

    10.node.previousSibling：node的前一个兄弟节点

    11.node.previousElementSibling：node前一个兄弟元素

十四、节点样式 *** 作

    1.html标签中集合了style的标准属性因此可以使用 DOM.style访问样式， 注意 它只能访问使用style定义的内联样式，而不能访问内部和外链样式，且访问样式需要使用驼峰替代" - "

    2.当CSS样式较多时，可以使用DOM.cssText来重置。

    3.window.getComputedStyle()：返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后，报告元素的所有CSS属性的值

创建元素节点并且把节点作为<ul>元素的子节点添加到DOM节点树上。先创建元素点，创建元素节点使用Jquery的工厂函数$()来完成，格式如下：$(html),该方法会根据传入的html字符串返回一个DOM对象，并将DOM对象包装成一个JQuery对象后返回。创建一个元素节点JQuery代码如下：

$li1=$("<li></li>")

代码返回$li1就是一个由DOM对象包装成的JQuery对象。把新建节点添加到DOM树中JQuery代码如下：

$("ul").append($li1)

添加后页面中只能看到<li>元素默认的"·",由于没有为节点添加文本所以只显示默认符号，下面创建文本节点。

PS:append()方法是添加DOM节点方法详见增--添加DOM节点。

---