js操作dom

67 阅读2分钟

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结构树:

image.png

创建节点

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')  // 读取元素的属性