DOM是什麽?

DOM 的英文全名是 Document Object Model，中文是「文件物件模型」。

1. 是 HTML、XML 和 SVG 文件的程序介面。
2. 提供了一个文件（树）的结构化表示法，并定义让程序可以存取并改变文件架构和内容的方法。
3. DOM 提供了文件以拥有属性与函式的节点与物件组成的结构化表示。
4. 节点可以附加事件处理程序，一旦触发事件就会执行处理程序。
5. DOM将网页与脚本或程序语言连结在一起。

如图所示，每个格子代表一个节点，可以是标签、文字、连结、属性...等。

querySelector 选择器

1. querySelector回传document第一个符合特定选择器群组的元素
2. 语法:element = document.querySelector( css选择器);
3. querySelectorAll 符合特定选择器群组的元素(可以选取多个)

如图所示querySelector只回传递一个特定选择器得值。

如图所示querySelectorAll可以回传多个特定选择器。

textContent 写入文字资料

1. 语法:变数名称+'点'( . )+textContent = 小括号( +反引号 ‵‵ )。

如图所示使用textContent可以改变特定选择器内的文字。

innerHTML 插入 HTML 标签

1. 语法:变数名称+'点'( . )+innerHTML = +反引号( ‵‵ )。

如图所示使用textContent语法'h1标签'的文字改变。

如图所示使用innerHTML语法会清空原来内容再增加新标签。

setAttribute 增加 HTML 标签属性

1. 语法:变数名称+'点'( . )+setAttribute+小括号( "属性" , "内容" )。

如图所示使用setAttribute语法可以新增或修改属性。

今天就到这边结束了。