id-1 html,1.1HTML-DOM

# JavaScript HTML DOM

*****

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

* * * * *

### 1.HTML DOM (文档对象模型)

当网页被加载时，浏览器会创建页面的文档对象模型(Document Object Model)。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

> * JavaScript 能够改变页面中的所有 HTML 元素

> * JavaScript 能够改变页面中的所有 HTML 属性

> * JavaScript 能够改变页面中的所有 CSS 样式

> * JavaScript 能够对页面中的所有事件做出反应

>

### 2.查找HTML元素

通常，通过 JavaScript，需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。

#### (1).通过 id 查找 HTML 元素

eg:

`var x=document.getElementById("name");`

如果找到该元素，则该方法将以对象(在 x 中)的形式返回该元素。

如果未找到该元素，则 x 将包含 null。

#### (2).通过标签名查找 HTML 元素

eg:

~~~

var x=document.getElementById("name");

var y=x.getElementsByTagName("p");

~~~

查找id为name的元素；然后再找到该元素下面的所有的p标签；

#### (3).通过类名找到 HTML 元素

eg:

~~~

var x=document.getElementsByClassName("name");

~~~

查找class名称为name的元素；

#### (4).通过query元素节点查找

eg：

~~~

• 1
• 2
• 3

/* query */

/* HTMLCo;;ection --元素节点的集合

NodeList

*/

var lis = document.querySelectorAll(".one");

console.log(lis);

for(let i=0;i

lis[i].onclick = function(){

for(let i=0;i

lis[i].style.color="#333"

}

this.style.color="#54bb47"

}

}

~~~