首页 > Web开发 > 详细

js基础--Dom操作

时间:2018-07-20 11:09:02      阅读:180      评论:0      收藏:0      [点我收藏+]
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操作

原文:http://blog.51cto.com/13803166/2147465

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!