js基础--Dom操作

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