44 lines
1.1 KiB
Markdown
44 lines
1.1 KiB
Markdown
|
---
|
|||
|
|
title: HTML Dom
|
|||
|
|
localeTitle: HTML Dom
|
|||
|
|
---
|
|||
|
|
## HTML Dom
|
|||
|
|
|
|||
|
|
使用HTML DOM，JavaScript可以访问和更改HTML文档的所有元素。
|
|||
|
|
|
|||
|
|
当网页加载时，浏览器创建页面的**d** **ocumentØbject** **中号**奥德尔。
|
|||
|
|
|
|||
|
|
HTML DOM模型构建为对象树：
|
|||
|
|
|
|||
|
|
DOM中的每个元素也称为节点。
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<title> My title </title>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<a href="#">My Link</a>
|
|||
|
|
<h1> My header </h1>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
上述HTML的DOM如下：
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
使用对象模型，JavaScript可以获得创建动态HTML所需的全部功能：
|
|||
|
|
|
|||
|
|
* JavaScript可以更改页面中的所有HTML元素
|
|||
|
|
* JavaScript可以更改页面中的所有HTML属性
|
|||
|
|
* JavaScript可以更改页面中的所有CSS样式
|
|||
|
|
* JavaScript可以删除现有的HTML元素和属性
|
|||
|
|
* JavaScript可以添加新的HTML元素和属性
|
|||
|
|
* JavaScript可以对页面中的所有现有HTML事件做出反应
|
|||
|
|
* JavaScript可以在页面中创建新的HTML事件
|
|||
|
|
|
|||
|
|
#### 更多信息：
|
|||
|
|
|
|||
|
|
[W3C - HTML DOM](https://www.w3schools.com/js/js_htmldom.asp)
|