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操作的主要内容,如果未能解决你的问题,请参考以下文章

js基础和js操作bom和dom对象

前端开发注意啦!一定要会的DOM基础操作(上)

jQuery的DOM操作

JavaScript基础及函数,BOM,DOM的节点及DOM节点操作

前端开发常用js代码片段

JS中的DOM操作怎样添加移除移动复制创建和查找节点