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>
来源: http://www.bubuko.com/infodetail-2692554.html