一、DOM对象
1.什么是DOM对象
- DOM：文档对象模型（Document Object Model）
- DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁
- 它是w3c万维网组织制定的一个标准， 通过这个标准可以去操作元素节点。比如动态创建一个节点，删除节点，替换节点..
2.分类
3 .DOM结构：树型结构
（1）节点类型
- 文档节点
- 元素节点
- 文本节点
- 注释节点
（2）节点与节点之间的关系
- 根节点
- 父节点
- 子节点
- 兄弟节点
（3）节点信息
- nodeName: 节点名称
- nodeValue：节点值
-
nodeType：节点类型
二、访问节点
1.使用getElement系列方法访问指定节点
- getElementById()
- getElementByName()
- getElementByTagName()
... ...
2.根据层次关系访问节点
-
节点属性
-
Element属性
示例
oNext = oParent.nextElementSibling || oParent.nextSibling
oPre = oParent.previousElementSibling || oParent.previousSibling
oFirst = oParent. firstElementChild || oParent.firstChild
oLast = oParent.lastElementChild || oParent.lastChild
- 注意：
在访问节点的时候，nextElementSibling是访问的下一个元素节点，oParent.nextSibling 是指访问的下一个节点。在元素节点与元素节点之间会有空的文本节点
三、操作节点
1. 操作节点的属性
-
获取某个属性的值
getAttribute("属性名")
-
设置某个属性的值
setAttribute("属性名","属性值")
2. 创建和插入节点
（1）创建节点步骤
- 创建一格元素节点p节点
const pEle = document.createElement("p"); //<p></p>
- 创建一个文本节点并设置类容
const testEle = document.createTextNode("内容");
- 把文本节点追加到p节点中
pEle.appendChild(testEle); //<p>内容</p>
（2）插入节点
- 语法，将B插入到A节点中
insertBefore（A,B）;
- 例子
function insert() {
// 获取输入框内容
const inputBtn = document.getElementById("txt");
const inputValue = inputBtn.value;
//创建li元素节点
const liEle = document.createElement("li"); //<li></li>
const liText = document.createTextNode(inputValue);
liEle.appendChild(liText); // <li>aa</li>
const ulEle = document.querySelector("#list");
// ulEle.appendChild(liEle);
ulEle.insertBefore(liEle, ulEle.firstElementChild.nextElementSibling);
}
（3）复制节点
- 语法，复制某个指定的节点
cloneNode(doop)
- 例子
function onCloneNode() {
console.log('>>>>>');
const ulEle = document.querySelector("#list");
const newUlEle = ulEle.cloneNode(false);
console.log('nodeName ',newUlEle.nodeName)
}
3. 删除和替换节点
（1）删除节点
- 语法，删除A节点
removeChild(A)
- 例子
function deleteNode() {
const ulEle = document.querySelector("#list");
//判断有无子节点 hasChildNodes
if(ulEle.hasChildNodes){
ulEle.removeChild(ulEle.lastElementChild);
}
}
（2）替换节点
- 语法，用其他的节点替换指定的节点
replaceChild( newNode, oldNode)
4. 操作节点样式
改变样式的属性有：
- style 属性
- className 属性
（1）style属性
- 语法
HTML元素.style.样式属性＝"值"
- 示例
//1. 获取html元素对象
const pEle = document.querySelector(".p1");
//2 改变元素样式
pEle.style.color = "red";
pEle.style.fontSize = "28px";
（2）className 属性
- 语法
HTML元素.className="样式名称"
- 示例
<style>
.pnew {
color: red;
font-size: 28px;
}
.pnewTwo {
font-weight: bold;
background-color: aquamarine;
}
</style>
// 将pnewTow样式添加到id为pEle标签上
document.getElementById("pEle").className="pnewTwo ";
- 封装添加样式和删除样式的方法
添加样式className
// 获取html元素对象
const pEle = document.querySelector(".p1");
// 调用添加样式的方法，pEle为需要添加样式的节点，pnewTwo为需要添加的css样式
addClass(pEle, "pnewTwo");
/**
* 给elem元素添加样式style,不影响原来样式
*/
function addClass(elem, style) {
if (elem.className) {
//判断添加的样式在className中是否已经存在，indexOf()判断某个字符串是否存在
if (elem.className.indexOf(style) === -1) {
const oldStyle = elem.className;
// 将旧的css样式和需要添加的css样式拼接起来，组成一个新的className
const newStyle = oldStyle + " " + style;
// 将className添加到pEle标签上
elem.className = newStyle;
}
} else {
elem.className = style;
}
}
删除样式className
function removeClass(elem, delStr) {
let str = elem.className; //原来样式
// 将字符串按照空格分隔开，组成字符串数组
const strArray = str.split(" ");
for (index in strArray) {
// 循环遍历字符串数组，判断我们需要删除的className字符串数组项是否存在
if (strArray[index] == delStr) {
// 数组删除，splice(m, n); 表示从下标为m的数开始删除，删除n个数据项
strArray.splice(index, 1);
}
}
let result = "";
strArray.forEach(function(item){
result = result + item + " ";
})
elem.className = result;
}
5. 获取元素的样式
- 语法
HTML元素.style.样式属性;
- 示例
alert(document.getElementById("pEle").color);
6. 获取元素位置
- 语法
// 标准浏览器
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
// chrome浏览器
document.body.scrollTop;
document.body.scrollLeft;
