DOM文档对象模型
1.DOM基本介绍
节点类型与节点名称
全称:Document Object Model,DOM就是节点
nodeName:获取节点名称
nodeValue:获取元素节点的文本值
getElementById():快速查找节点的方法,同时也是js引用html标签的方法
nodeName:获取节点名称
nodeValue:获取元素节点的文本值
getElementById():快速查找节点的方法,同时也是js引用html标签的方法
getElementsByTagName():快速查找标签名称,返回的是节点列表
getElementsByClassName():查找body中class选择器声明的元素
document.getElementsByName():访问body中对应的name值
document.querySelector():等同于在括号内用CSS描写声明的类选择器
document.querySelectorAll():可以找到所有的类选择器声明的标签
childNodes:它是一个类数组对象,它包含了该节点下所有子节点,它是会自动变化的
children:它会忽略所有的文本节点和空白节点,它是固定的
firstChild:访问第一个节点
lastChild:访问最后一个节点
parentNode:获取父级节点属性
previousSibling:返回的是同意父元素下前一个相邻节点,也就是它的前一个兄弟元素
nextSibling:返回下一个兄弟元素
previousElementSibling:上面的会把换行算上,所以需要它或下面一个属性,直接用于查询某个节点的上一元素节点
nextElementSibling:直接用于查找某一元素的下一节点
createElement():创建一个元素节点
父节点.appendChild(子节点):添加内容҅
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<p id="test2">Lorem ipsum dolor sit amet.</p>
<a href="" class="abc">链接1</a>
<ul id="test3">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<script>
//创建一个新的p元素
let newP = document.createElement("p");
//创建一个文本节点
let newContent = document.createTextNode("这是一个测试");
//将文本节点添加给P元素节点作为子节点
newP.appendChild(newContent);
</script>
</body>
父节点.remove(子节点):删除节点
父节点.replaceChild(新节点,旧节点):替换节点
节点.clone(布尔值):克隆节点
false:浅克隆 只复制其最外层的标签,不会复制内部内容
true:深克隆 复制选中元素的所有
createComment():在这里面的内容会是一个注释,不会显示在页面上,但是检查的时候会有显示
实时集合
<body>
<p id="test1" class="abc">Lorem ipsum dolor sit amet.</p>
<p id="test2" name="qwe">Lorem ipsum dolor sit amet.</p> <a href="" class="abc">链接1</a>
<ul id="test3">
<li>item1</li>
<li name="qwe">item2</li>
<li>item3</li>
</ul>
<script>
let ul = document.getElementById("test3");
console.log(ul.childNodes.length);//7
let newLi = document.createElement("li");
newLi.innerText = "新的li元素";
ul.appendChild(newLi);
console.log(ul.childNodes.length);//ݒ8 长度已经实时的发生了改变
</script>
</body>
innerHTML:获取节点内部信息,它的显示和在页面上的没有区别
innerText:它的显示和在html代码中没有区别
属性和类的操作
元素属性操作相关方法
获取和设置元素属性
getAtt ribute()
setAttribute()
删除元素属性
removeAtt ribute()
元素的类的相关操作
classList
来获取一个元素节点所有的类
添加类
add()方法来给一个元素节点快速添加类
删除类
通过remove()方法来移除一个元素节点的类
切换类
toggle()方法是一个非常有用的方法,可以用来对类进行切换。如果元素节点没有给出的类, 就添加该类,如果有该类,就删除该类。如果类被添加了,就返回true,如果是被删除了,就返 回false。
自定义属性
使用data -作为前缀,比如给<p>元素添加 —个自定义属性power,应该设置为data-power
操作CSS
test1.style.color = "red"
操作表格
获取表格的行和列