JS中DOM操作的一些方法
常用dom方法
选择器
- document.getElementById(“box”); //通过id获取标签
- document.getElementById(‘box’).innerHTML;//innerHTML 属性设置或返回指定标签的HTML内容
- document.getElementsByTagName(“div”); //根据标签名获取元素
- document.getElementsByClassName(‘aa’);//根据指定类名获取
- document.getElementsByName(name); //根据 name 属性获取一组元素节点对象
- document.body //可以直接获取body
- document.querySelector("#demo");//返回匹配指定选择器的第一个元素
- document.querySelectorAll("#app"); //获取所有的#app
需要注意:
getElementById( )适用于需要查找文档中的一个特定的元素,如果没有指定 ID 的元素返回 null,如果存在多个指定 ID 的元素则返回第一个。其他的方法获取结果可能是多个,所以element后面要加s。
元素对象
- document.body.children;//获取 body 元素的子元素集合
- document.getElementById(“aa”).parentElement; //获取指定元素的父元素
- document.getElementById(“aa”).nextElementSibling ;//返回指定元素的下一个兄弟元素
- document.getElementById(“aa”).previousElementSibling;//返回指定元素的前一个兄弟元素
<div id="b">
bb
</div>
<div class="a">
aaa
</div>
<div id="c">
ccc
</div>
<script>
let a = document.getElementById('a')
console.log(a.children[0])//子
console.log(a.parentElement)//父级
console.log(a.nextElementSibling)//下一个同级
console.log(a.previousElementSibling)//上一个同级
let table = document.createElement('table')//createElement通过指定名称创建一个元素
document.body.appendChild(table)//appendChild添加子级
</script>
createElement() 方法通过指定名称创建一个元素。
appendChild() 方法可向指定节点的末尾添加新的子节点。
classList.add为元素添加class。
firstElementChild属性返回指定元素的第一个子元素。
lastElementChild 属性返回指定元素的最后一个子元素节点,如果没有,则返回 null。
previousElementSibling 属性返回指定元素的前一个兄弟元素。
nextElementSibling 属性返回指定元素之后的下一个兄弟元素。
table.classList.add('aa')//为"aa"添加class
table.firstElementChild//table的第一个子节点
table.firstElementChild.previousElementSibling//table的第一个子节点的上一个同级
table.firstElementChild.nextElementSiblingtable的第一个子节点的下一个同级
table.lastElementChild//table的最后一个子节点