DOM操作节点
一、选择器(查找节点):
- document.getElementById(’#id’)
通过id获取元素(只有一个id Element不能加s) - document.getElementsByClassName(’.class’)[0]
通过class获取元素(Element要加s) - document.getElementsByTagName(‘div’)
通过标签获取元素(Element要加s) - document.getElementsByName(‘name’)[0]
通过name获取元素(Element要加s) - document.querySelector(’.demo’)
获取一个class为demo元素 - document.querySelectorAll(’.demo’)
获取页面所有class为demo元素 - div.children
获取div(节点)的子节点 - div.parentElement
获取div(节点)的父节点 - div.nextElementSibling
获取div(节点)的下一个兄弟节点;
nextSibling 获取div(节点)的下一个兄弟节点。 - div.previousElementSibling
获取div(节点)的上一个兄弟节点;
previousSibling 获取div(节点)的上一个兄弟节点。 - div.fristChild 返回div节点的第一个子节点;
firstElementChild 获取父节点的第一个子节点(具体) - div.lastChild 返回div节点的最后一个子节点;
lastElementChild 获取父节点的最后一个子节点(具体)
二、操作节点
- document.createElement(‘ul’)
在页面创建一个标签为ul的节点
createTextNode(“文本”) 创建一个文本节点 - div.appendChild§
在div(元素)里内容的后面添加一个p(子)节点 - div.insertBefore(div,p)
在div(元素)外的前面插入一个p节点 - div.removeChild§
在div(元素)删除一个p (子)节点 - div.cloneNode(boolean)
复制一个div(元素),当boolean=true时为深度复制(既包含节点又包 含标签,而且还包含节点里的内容),当boolean=false时为浅度复制(只包 含节点,节点标签) - div.replaceChild(新节点,旧节点)
将旧节点替换为新节点(操作的是父节点
三、操作节点class以及属性
1.获取属性
getComputedStyle(节点).css.属性 ,获取节点的css属性;
(节点).style.属性(例:h1.style.color)只能获取行内式属性。
- 设置属性 image.setAttribute(‘src’,‘image’)
- 获取属性 getAttribute(’’) 或 getAttributeNode(’’)
- 删除属性 removeAttribute(‘’)
2.className = “active”
为节点添加一个class为active,可以多添加多个:className = “active aa”,如果有两个class,会清空对象原有的class。
3.classList.add(‘active’)
为节点添加指定的class为active,可以添加多个:classList.add(‘active’,‘aa’)
4.classList.remove(’’)
为节点删除指定的class,可以删除多个:classList.add(‘’,‘’)
5.classList.toggle(‘active’)
如果该节点class为active存在的话就删除,反之则添加;
classList.contains(‘active’)该节点是否包含class为active
6.classList.replace(oldclass,newclass)
新class替换旧class