今天总结一些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+)
childElementCount 返回子元素(不包括文本节点和注释)的个数
firstElementChild 指向第一个子元素; firstChild 的元素版
lastElementChild 指向最后一个子元素; lastChild的元素版
previousElementSibling 指向前一个同辈元素;previousSibling 的元素版
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)
}