码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2018-01-05 12:30:35      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:size   pytho   color   haskell   classname   htm   cto   font   test   

 1 <!-- HTML结构 -->
 2 <div id="test-div">
 3 <div class="c-red">
 4     <p id="test-p">JavaScript</p>
 5     <p>Java</p>
 6   </div>
 7   <div class="c-red c-green">
 8     <p>Python</p>
 9     <p>Ruby</p>
10     <p>Swift</p>
11   </div>
12   <div class="c-green">
13     <p>Scheme</p>
14     <p>Haskell</p>
15   </div>
16 </div>

定位如下:

第一种方法:

  1. // 选择<p>JavaScript</p>:
  2. //var js = document.getElementById(‘test-p‘);
  3. // 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
  4. //var arr = document.getElementsByClassName(‘c-red c-green‘)[0].children;
  5. // 选择<p>Haskell</p>:
  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];
  4.  

第三种方法:

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

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

标签:size   pytho   color   haskell   classname   htm   cto   font   test   

原文地址:https://www.cnblogs.com/my-blogs-for-everone/p/8203345.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!