js中,dom对象,包含了操作html元素的一系列方法。
DOM元素的操作
查看dom元素的方法
document.getElementsByTagName() //通过标签名选择元素,拿到的所有元素会放在一个类数组中。
document.getElementsByName() // 通过了类名选择元素,拿到的所有元素会放在一个类数组中。 ie8及一下浏览器没有。
document.getElementById() //通过标签的id获取元素 在ie8一下,不区分大小写,如果name值跟id相同的话,也能选出来。
document.getElementsByName() //通过标签的name值获取元素, 低版本浏览器只有表单元素和iframe可以用。
document.querySelector() //可以通过css选择器的方式来选中元素。
document.querySelectorAll() //选中所有的元素,放到一个类数组中。 后面这两个方法有失效性的问题。
通过节点树获取元素
获取到的元素,身上有一系列的属性和方法。(包含文本节点和元素节点)
parentNode() //查找父元素
childNodes() //查找所有的子节点 文本节点,属性节点,元素节点
firstChild() //第一个子节点
lastChild() //最后一个子节点
nextSibling() //后一个兄弟节点
previousSibling() //前一个兄弟节点
通过元素节点树
parentElement() //返回它的父元素节点
chirden() //返回当前元素的元素子节点
lastElementChild() //返回最后一个元素节点
firstElementChild() //返回第一个元素节点
nextElementSibling/previousElementSibling // 返回后一个/前一个兄弟元素
节点的四个属性
nodeName //元素的标签名,以大写形式表示只读
nodeValue //Text节点或Comment节点的文本内容,可读写
nodeType //该节点的类型,只读
attributes //Element节点的属性集合
节点的第一个方法 Node. hasChildNodes()
DOM结构树:
创建节点
document.createElement() // 创建一个元素节点
document.body.appendChild() //将创建好的标签添加到body里面
document.createTextNode() //创建文本节点
document.createComment() //创建注释
插入节点
parent.appendChild() //将元素插入到另一个元素里面,类似于数组的push操作,注:如果将页面已有的元素插如,类似于剪切
parent.insertBefore(a,b) //在parent里面将a节点插如到b节点之前
删除节点
parent.removeChild('child') //父节点删除子节点
child.removeChild() //调用方法删除自己
替换节点
parentNode.replaceChild(new,origin) //拿新的元素去替换旧的元素
节点的一些属性
Element 节点的一些属性
innerHTML //改变元素里面的html内容 可以直接赋值 = (直接覆盖里面的内容) += (往后面拼接)
innerText(火狐不兼容)/textContent(老版本ie不好使) //在赋值的时候需要注意,会将里面所有的东西都覆盖掉
节点的一些方法
element.setAttribute('class','demo') //给元素设置行内属性
element.getAttribute('calss') // 读取元素的属性