javascript DOM基础和扩展

今天总结一些js 的DOM的一些知识。很简单，也很基础，但是我认为很重要。

一、前言

我想很多人在学js时，都会经常用 getElementById() 和 getElementsByTagName() 但是今天我主要不是讲这两个，而是讲一下其他的Dom 操作的方法。

二、querySelector()方法 和 querySelectorAll() 方法。

这两个方法它可以去解析css选择符。我们可以利用这两个方法，通过css选择符去查找我们想要的元素。（目前主流浏览器都支持）

1.querySelector() 方法获取所选元素的第一个元素

<ul>    <li class="one">        <div>我是div</div>    </li>    <li class="two">        <a href="">我是a标签</a>    </li>    <li class="other">我是第三个Li</li>    <li class="other">我是第四个Li</li>    <li class="other">我是第五个Li</li></ul>

 var li = document.querySelector("ul>li"); console.log(li) // 获取类为 one 的li元素

2.querySelectorAll() 方法接受的参数和querySelector()一样，只不过它返回来的是所有被选择的元素的集合（类数组）

例如：

var li = document.querySelectorAll("ul>li"); console.log(li) // ul 元素下边的所有li元素

如果这两个元素传入的选择符不被css选择符所支持，哪儿将会报错。

 var li = document.getElementById("ul").querySelectorAll("li");console.log(li) // 结果会返回 id 为ul 下边的所用 li 元素。

三、元素的遍历

对于元素间的空格，Ie9及之前版本不会返回文本节点，但是其他所有浏览器都会返回文本节点，为了弥补这一差异，而又保持DOM规范不变，w3c 又新定义了一株属性。（IE9+）

1. childElementCount 返回子元素（不包括文本节点和注释）的个数

2. firstElementChild 指向第一个子元素； firstChild 的元素版

3. lastElementChild 指向最后一个子元素； lastChild的元素版

4. previousElementSibling 指向前一个同辈元素；previousSibling 的元素版

5. nextElementSibling 指向后一个同辈元素； nextSibling 的元素版

DOM节点的增删改查：
增加：
1.appendChild() 向列表childList 尾部添加节点
2.insertBefore( newNode,position) 向列表指定位置插入节点（newNode新节点，position 插入的位置）
3.removeChild(,position) 删除列表中指定位置的节点
4.replaceChild( newNode,position)替换列表指定位置的节点
5.cloneChild() 克隆dom 节点
6. createElement() 创建节点
7. offsetParent() 得到父元素

其它：
1. innerText 获取文本节点，不包括标签，（可读写）
2. innerHTML 获取元素的所有子文本 （可读写）
3. getAttribute() 获取元素的属性
4. clientWidth 和 clientHeight 获取元素可视区域的大小 （宽+内）
5. offsetWidth 和 offsetHeight 获取元素的实际大小 （宽+内+边+外）
6. clientLeft he clientTop 获取元素设置了的左边框和上边框的大小
7. offsetLeft 和 offsetTop 获取元素相对父元素的位置（最好设置了position,否则不同浏览器解析不同）
8. getBoundingClientRect() 返回一个矩形对象，包含元素的 left 、top、right、 bottom 的距离，IE 中默认坐标（2,2）
9. getComputedStyle(“元素”，“伪类（或是null）”),第二个参数在现代浏览器中可以省略，获取元素所有样式（IE9+），在IE中使用 currentStyle()
10. getPropertyValue(“样式”) 获取样式声明对象上的属性值，（不支持驼峰法，IE9+）,例如：

getComputedStyle(element, null).getPropertyValue("float");

11 . scrollTop 和 scrollLeft 获取滚动条的位置（可读写）

DOM操作节点中的文本：

1.appendData(text) 将text添加到节点的末尾

2.deleteData(offset，count) 从offset 指定的位置开始删除count个字符

3.insertData(offset,text) 在offset指定的位置插入text

4.replaceData(offest,count,text) 用text替换从offset指定的位置开始到offset+count为止处的文本

5.splitText（offset）从offset指定的位置将当前文本节点分成两个文本节点

6.substringData(offset,count) 提取从coffse 指定的位置开始都offset+count为止的字符串。

7.createTextNode() 创建文本节点

四、HTML5 新增的部分Dom操作

1.getElementsByClassName() 方法 （ie9+）
该方法接收一个参数，即一个包含一或多个类名的字符串，返回的都是带有nodeList 的集合。例如：
还是上面的HTML

 var dom = document.getElementsByClassName("other"); console.log(dom) // 是一个集合，包含类名为other的所有元素

同样我们也可以指定获取元素的范围

var dom = document.getElementById(""ul).getElementsByClassName("two"); console.log(dom) // 获取id为ul元素下边的所有类名为two的元素

注意：使用这个元素可以方便的为带有某些类的元素添加事件处理程序，从而不必局限于使用id或标签名。不过别忘了，因为它返回的对象是NodeList ，所以使用这个方法以及其他返回NodeList 的DOM方法都具有相同的性能问题。

2. classlist 属性 (目前firefox3.6+ 和 Chrome)
该属性可以很方便的添加，删除，更改元素的类名，该元素有一下几种方法；
① add(value) 将给定的字符串添加到列表中，如果值已经存在，就不添加了

② contains(value) 表示列表中是否存在给定的值，如果存在则返回ture，否则返回false

③ remove(value) 表示从列表中删除给定的字符串

④toggle(value) 如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

这里我只提供一个简单的例子：
css:

    .add{ display:none}

html

<ul id="ul">    <li class="one">        <button>我是div</button>    </li>    <li class="two">    <a href="">我是a标签</a>    </li>    <li class="other">我是第三个Li</li>    <li class="other">我是第四个Li</li>    <li class="other">我是第五个Li</li></ul>

js

var dom = document.querySelector(".two");var bol = true;document.querySelector(".one").onclick = function(){   dom.classList.toggle("add");   console.log(dom)}