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

 1 
 2 <div id="test-div">
 3 <div class="c-red">
 4     <p id="test-p">Javascriptp>
 5     <p>Javap>
 6   div>
 7   <div class="c-red c-green">
 8     <p>Pythonp>
 9     <p>Rubyp>
10     <p>Swiftp>
11   div>
12   <div class="c-green">
13     <p>Schemep>
14     <p>Haskellp>
15   div>
16 div>

第一种方法：

1. // 选择

   Javascript

   :
2. //var js = document.getElementById(‘test-p‘);
3. // 选择

   Python

   ,

   Ruby

   ,

   Swift

   :
4. //var arr = document.getElementsByClassName(‘c-red c-green‘)[0].children;
5. // 选择

   Haskell

   :
6. //var haskell = document.getElementsByClassName(‘c-green‘)[1].lastElementChild;

第二种方法：

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

第三种方法：

1. // 选择

   Javascript

   : var js = document.getElementById(‘test-p‘);
2. // 选择

   Python

   ,

   Ruby

   ,

   Swift

   : var arr = document.querySelectorAll(‘.c-red.c-green>p‘);
3. // 选择

   Haskell

   : var haskell = document.getElementById(‘test-div‘).lastElementChild.lastElementChild;