03DOM基础

03 DOM基础

查找(获取)页面元素：

obj.parentNode 获取obj元素对象的父节点
obj.children 获取obj元素对象的子节点，返回的是个集合
obj.firstElementChild 获取obj元素对象的第一个子节点，最普遍的用法是访问该元素的文本节点
obj.lastElementChild 获取obj元素对象的最后一个子节点
obj.nextElementSibling 获取obj元素对象的下一个节点
obj.previousElementSibling 获取obj元素对象的上一个节点

document.getElementById() 通过ID获取页面标签元素对象
document.getElementsByName 通过name属性获取页面标签元素对象，返回的是一个集合
document.getElementsByClassName 通过class属性名获取页面标签元素对象，返回的是一个集合
document.getElementsByTagName 通过标签名获取页面标签元素对象，返回的是一个集合

元素操作：

元素属性操作：

​ obj.getAttribute(“属性名”)
​ obj.setAttribute(“属性名”,“属性值”)

创建并添加元素：

​ document.createElement(tagName) 创建一个标签名为tagName的新元素节点
​ A.appendChild(B) 把B节点作为子元素追加至A节点的末尾
​ A.insertBefore(B,C) 在A节点添加子元素，把B添加到C的前面
​ A.cloneNode(deep) 复制指定的A节点,deep为boolean类型，默认为false，表示是否复制节点的绑定事件

删除节点：

​ A.remove() 直接将A节点删除
​ A.removeChild(B) 在A节点中删除子节点B

删除节点属性：

​ A.removeAttribute(“属性名”) 将A点的指定属性删除

替换节点

​ A.replaceChild(newNode, oldNode) 在父节点A中，用newNode替换oldNode

节点样式操作：

​ A.style.xxx = “值” 设置A节点的style属性，xxx样式，注意：当样式中有-时，为驼峰命名
​ A.className = “” 设置A节点的class属性