js_操作DOM
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js_操作DOM相关的知识,希望对你有一定的参考价值。
document.getElementById()
document.getElementsTagName()
css的document.getElemensBytClassName()
// 返回ID为‘test‘的节点: var test = document.getElementById(‘test‘); // 先定位ID为‘test-table‘的节点,再返回其内部所有tr节点: var trs = document.getElementById(‘test-table‘).getElementsByTagName(‘tr‘); // 先定位ID为‘test-div‘的节点,再返回其内部所有class包含red的节点: var reds = document.getElementById(‘test-div‘).getElementsByClassName(‘red‘); // 获取节点test下的所有直属子节点: var cs = test.children; // 获取节点test下第一个、最后一个子节点: var first = test.firstElementChild; var last = test.lastElementChild;
selector语法querySelector()和querySelectorAll()
兼容性:IE8<=不支持(ie8部分)
// 通过querySelector获取ID为q1的节点: var q1 = document.querySelector(‘#q1‘); // 通过querySelectorAll获取q1节点内的符合条件的所有节点: var ps = q1.querySelectorAll(‘div.highlighted > p‘);
练习
<!-- html结构 --> <div id="test-div"> <div class="c-red"> <p id="test-p">javascript</p> <p>Java</p> </div> <div class="c-red c-green"> <p>Python</p> <p>Ruby</p> <p>Swift</p> </div> <div class="c-green"> <p>Scheme</p> <p>Haskell</p> </div> </div>
‘use strict‘; // 选择<p>JavaScript</p>: var js = document.getElementById(‘test-p‘); // 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>: var arr = document.getElementsByClassName(‘c-red‘)[1].children; // 选择<p>Haskell</p>: var haskell = document.getElementsByClassName(‘c-green‘)[1].lastElementChild;
以上是关于js_操作DOM的主要内容,如果未能解决你的问题,请参考以下文章