js基础--Dom操作
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js基础--Dom操作相关的知识,希望对你有一定的参考价值。
1.直接查找元素
document.getElementById #根据ID获取一个标签
document.getElementsByName #根据name属性获取标签集合
document.getElementsByClassName #根据class属性获取标签集合
document.getElementsByTagName #根据标签名获取标签集合
2.间接查找元素
parentElement # 父节点标签元素
children # 所有子标签
firstElementChild # 第一个子标签元素
lastElementChild # 最后一个子标签元素
nextElementtSibling # 下一个兄弟标签元素
previousElementSibling # 上一个兄弟标签元素
3.操作DOM
3.1 innerText修改标签页面上的内容
<div id="d1">d1</div>
<script>
var tag=document.getElementById(‘d1‘);
var content=tag.innerText;
console.log(content);
</script>
3.2className修改标签的class样式
<div id="d1" class="c1">d1</div>
<script>
var tag=document.getElementById(‘d1‘);
var content=tag.className;
tag.className=‘c2‘
console.log(tag.className);
</script>
3.3classList修改标签的class样式
<div id="d1" class="c1">d1</div>
<script>
var tag=document.getElementById(‘d1‘);
var content=tag.classList;
//class增加一个c2
content.add(‘c2‘);
console.log(content);
//class减掉一个c1
content.remove(‘c1‘);
console.log(content);
</script>
以上是关于js基础--Dom操作的主要内容,如果未能解决你的问题,请参考以下文章