首页 > 代码库 > dom操作js
dom操作js
1、getElementById()//ie8下不区分大小写
getElementsByName()//name属性相比于Id可以不唯一,且其只在表单。表单元素。img 。iframe中有用,返回一个nodelist数组、
getElementsByTagName()//返回数组
getElementsByClassName()//根据css属性选取元素。除了IE8以下都实现了
2、通过css选择器来选择文档要素
与上面的选择方法相比,下面的方法是静态的,不会随着文档的变化而改变
querySelectorAll(“div.middle”)//返回一个NodeList
querySelector()//返回第一个匹配的元素
3、文档节点树:
parentNode
childNodes firstChild lastChild
nextSibling previoursSibling previousSibling
nodeType//节点类型为整数
nodeValue//text或comment的文本内容
nodeName//标签名,为大写
4、文档元素树
只考虑元素对象,而不考虑文本和注释等,其在实际操作时,往往更有用.除了ie4都实现了
children//NOdeList
firstElementChild lastElementChild
nextElementSibling previousElementSibling
childElementCount
5、设置元素属性
对于标准属性如:id、事件、src等。直接用属性赋值即可
对于非标准属性:class等。用下面的方法:、
getAttribute() setAttribute() hasAttribute() removeAttribute()
6element.textContent//可以用来设置纯文本
7、修改文档树
创建节点:document.createElement()createTextNode()
插入节点 parent.appendChild(chid) parent.insertBefore(child,parent.childNodes[n])//如果child是文档中存在的接待你,则会将其破移动。删除其原在位置
8、删除、复制、替代节点
removeChild cloneNode replaceChild
dom操作js