[JavaScript基础]学习②⑨--操作DOM

获取节点

第一种

// 返回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;

第二种 （低版本的IE<8不支持）

// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector('#q1');

// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll('div.highlighted > p');

Paste_Image.png

练习

    
JavaScript
    
Java
  
  

    
Python
    
Ruby
    
Swift
  
  

    
Scheme
    
Haskell
  

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

// 选择
Python
,
Ruby
,
Swift
:
var arr = document.getElementsByClassName('c-red c-green')[0].children;

// 选择
Haskell
:
var haskell = (document.getElementsByClassName('c-green')[1].children)[1];