什么是HTML文档被浏览器解析后就是DOM树树形结构

　　什么是HTML文档被浏览器解析后就是DOM树树形结构

　　由于浏览器将 HTML 文档解析为 DOM 树，要改变 HTML 的结构，需要通过 JavaScript 来操作 DOM。

　　永远记住 DOM 是一个树结构。操作一个DOM节点其实就是这么几个操作：

　　在操作一个DOM节点之前，我们需要通过各种方式来获取DOM节点。最常用的方法是 document.getElementById() 和 document.getElementsByTagName()，以及 CSS 选择器 document.getElementsByClassName()。

　　由于 ID 在 HTML 文档中是唯一的，因此 document.getElementById() 可以直接定位到唯一的 DOM 节点。 document.getElementsByTagName() 和 document.getElementsByClassName() 总是返回一组 DOM 节点。要准确选择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;

　　第二种方法是使用querySelector()和querySelectorAll()，需要了解selector语法，然后使用条件获取节点，比较方便：

　　// 通过querySelector获取ID为q1的节点：

var q1 = document.querySelector('#q1');

// 通过querySelectorAll获取q1节点内的符合条件的所有节点：

var ps = q1.querySelectorAll('div.highlighted > p');

　　注意：低版本的IEquerySelector和querySelectorAll。 IE8 只支持有限。

　　严格来说，我们这里的DOM节点指的是Element，但DOM节点实际上是Node。在HTML中，Node包括Element、Comment、CDATA_SECTION等多种，还有根节点的Document类型，但大多数时候我们只关心Element，也就是实际控制页面结构的Node 其他类型的节点可以忽略。根节点Document已经自动绑定到全局变量document。

　　锻炼

　　HTML 结构如下：

　　JavaScript

　　Java

　　蟒蛇

　　*敏*感*词*

　　迅捷

　　方案

　　哈斯克尔

　　

<p id="test-p">JavaScript

　　Java

　　Python

　　Ruby

　　Swift

　　Scheme

　　Haskell

</p>

　　请选择符合指定条件的节点：

　　'use strict';

----

// 选择<p>JavaScript:

var js = ???;

// 选择

　　Python,

　　Ruby,

　　Swift:

var arr = ???;

// 选择

　　Haskell:

var haskell = ???;

----

// 测试:

if (!js || js.innerText !== 'JavaScript') {

alert('选择JavaScript失败!');

} else if (!arr || arr.length !== 3 || !arr[0] || !arr[1] || !arr[2] || arr[0].innerText !== 'Python' || arr[1].innerText !== 'Ruby' || arr[2].innerText !== 'Swift') {

console.log('选择Python,Ruby,Swift失败!');

} else if (!haskell || haskell.innerText !== 'Haskell') {

console.log('选择Haskell失败!');

} else {

console.log('测试通过!');

}

</p>