DOM(文档对象模型)对象树--DOM节点结构树

1.含义

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

HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准

在 DOM 中，所有 HTML 元素都被定义为对象。----其中就是方法（可进行操作）和属性（可被改变值）

HTML DOM 模型被结构化为对象树：

2.（其中一种方式js调用）如何调用------方法和属性

其中document为文档对象代表网页，先从访问 document 对象开始

• JavaScript 能改变页面中的所有 HTML 元素

getElementById方法查找元素

• JavaScript 能改变页面中的所有 HTML 属性

getElementById方法中属性innerHTML（改变内容） ：

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

• JavaScript 能改变页面中的所有 CSS 样式

document.getElementById("p2").style.color = "blue";

• JavaScript 能删除已有的 HTML 元素和属性
• JavaScript 能添加新的 HTML 元素和属性
• JavaScript 能对页面中所有已有的 HTML 事件作出反应
• JavaScript 能在页面中创建新的 HTML 事件

新增事件：

document.getElementById(id).onclick = function(){code}

新增事件监听程序：事件发生时要执行的程序（函数）

document.getElementById("myBtn").addEventListener("click", displayDate);

3.DOM节点：

var myTitle = document.getElementById("demo").childNodes[0].nodeValue;

可以通过方法：增删改查HTML节点

4.对象

元素列表集合（非数组）HTMLCollection 对象

getElementsByTagName()通过标签名字查找所有标签的 方法返回 HTMLCollection 对象。

HTMLCollection 对象是类数组的 HTML 元素列表（集合）。

HTML DOM NodeList 对象

NodeList 对象是从文档中提取的节点列表（集合）。

NodeList 对象与 HTMLCollection 对象几乎相同。