HTML中javascript使用dom获取dom节点范例

2024-08-31 02:48:43

 <!-- 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>

定位如下：

第一种方法：

// 选择<p>JavaScript</p>:
//var js = document.getElementById('test-p');
// 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
//var arr = document.getElementsByClassName('c-red c-green')[0].children;
// 选择<p>Haskell</p>:
//var haskell = document.getElementsByClassName('c-green')[1].lastElementChild;

第二种方法：

var js = document.querySelector('#test-p');
var arr = document.querySelectorAll('#test-div > .c-red.c-green > p');
var haskell = document.querySelectorAll('#test-div > .c-green > p')[4];

第三种方法：

// 选择<p>JavaScript</p>: var js = document.getElementById('test-p');
// 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>: var arr = document.querySelectorAll('.c-red.c-green>p');
// 选择<p>Haskell</p>: var haskell = document.getElementById('test-div').lastElementChild.lastElementChild;

最新文章

热门文章