DOM 文档对象模型

langmanboy

已于 2022-04-12 21:02:22 修改

阅读量779

点赞数

分类专栏： JavaScript 文章标签：前端 javascript

于 2022-04-12 11:56:06 首次发布

本文链接：https://blog.csdn.net/langmanboy/article/details/124120635

版权

DOM 文档对象模型

1. Web API 的概念

api：应用程序接口。是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能

Web API：是 Web 的应用程序编程接口，浏览器 API 可以扩展 Web 浏览器的功能，服务器 API 可以扩展 Web 服务器的功能

js 组成：ECMAScript、DOM、BOM

ECMAScript：定义了 JavaScript 的语法规范
BOM：浏览器对象模型，提供用于处理文档之外的所有内容的其他对象
DOM：文档对象模型，提供用于处理文档的对象

2. DOM 基础知识

2-1 window 对象

所有浏览器都支持 window 对象，它代表浏览器的窗口，不同窗口对应着不同的window 对象
在 javascript 中，window 为全局对象，全局函数和全局变量为 window 对象的属性，document 对象也是 window 对象属性

var user = "jsx";
console.log(window.user); // jsx

function username() {
   
    console.log('hello dom')
}
window.username()

// 获取浏览器窗口高度
console.log(window.innerHeight)

2-2 文档对象模型

文档对象模型 DOM 是 HTML 和 XML 文档的编程接口

提供了对文档的结构化的表述，
定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容
DOM 将文档解析为一个由节点和包含属性和方法的对象组成的结构集合

可以通过 document 对象去访问改变文档结构、样式和内容

console.log(window.document);
window.onload = function() {
   
    // 给body标签添加样式
    document.body.style.background = '#2ecc71'
}

2-3 DOM 自动修正

浏览器遇到格式不正确的 HTML，它会在形成 DOM 时自动更正它

html 根标签即使它不存在于文档中 — 它也会出现在 DOM 中
在生成 DOM 时，浏览器会自动处理文档中的错误，关闭标签等
</body> 标签后的所有元素，DOM 都会修正添加到 <body> 标签内
表格必须具有 <tbody> 标签，忽略时浏览器在创建 DOM 时，自动地创建了 <tbody>

<ul><li>修复未闭合标签</ul>
// 补充闭合标签
<ul> <li>修复未闭合标签</body></ul>

<table>
    <tr><td>自动补充tbody标签</tr>
</table>
// 补充tbody标签
<table>
    <tbody>
        <tr><td>自动补充tbody标签</td></tr>
    </tbody>
</table>

2-4 控制台交互

Stylel 样式 — 我们可以看到按规则应用于当前元素的 CSS 规则
Computed 计算属性 — 按属性查看应用于元素的 CSS：对于每个属性，我们可以都可以看到赋予它的规则包括 CSS 继承等
Event Listeners 事件监听 — 查看附加到 DOM 元素的事件侦听器

在控制台中获取节点，可以通过点击左上角的小图标按钮可以让我们使用鼠标从网页中选择一个节点
也可以在元素 Elements 选项面板中选择元素节点
也可以通过 document 对象来获取元素节点
按下 Esc — 它将在元素 Elements 选项面板下方打开控制台 Console
最后选中的元素可以通过 $0 来进行操作，先前选择的是 $1等

3. DOM 节点类与树结构

3-1 DOM 节点类

EventTarget：该类的对象从未被创建，由可以接收事件、并且可以创建侦听器的对象实现，提供 addEventListener、removeEventListener 等事件支持方法
- Element 元素节点、document 文档节点和 window 对象部署了该类
- XMLHttpRequest，AudioNode，AudioContext 也部署了该类
Node：是所有 DOM 节点的基础（包含所有节点类型）
- Node 类的对象从未被创建，提供 firstChild、parentNode 等节点操作方法
Element：是 DOM 元素的基本类（包含所有元素节点）
- 提供getElementsByTagName、querySelector 等方法
HTMLElement：是所有 HTML 元素的基本类（包含所有 HTML 元素节点）
- 提供childNodes、nodeType、nodeName、className、nodeName等方法
SVGElement：是所有 SVG 元素的基本类（包含所有 SVG 元素节点）
XMLElement：是所有 XML 元素的基本类（包含所有 XML 元素节点）

console.dir(window)
// window对象包含了所有节点类
console.log(window.Node);
console.log(window.Element)
console.log(window.HTMLElement)
console.log(HTMLElement.__proto__ === Element); // true
console.log(Element.__proto__ === Node) // true
console.log(Node.__proto__ === EventTarget) // true
console.log(EventTarget.__proto__.__proto__.__proto__) // true

3-2 DOM 树

DOM 树：将 HTML 表示为标签的树形结构

根据文档对象模型，每个 HTML 元素都是一个节点对象，嵌套的元素是闭合元素的子元素，元素内的文本也是一个文本节点对象

document 文档节点：document 是 DOM 操作的起始节点
element 元素节点：HTML 元素被称为元素节点，<html> 为根节点，<head> 和 <body> 为相对于 <html> 内的子节点
attribute 属性节点：HTML 元素中元素的属性 attributes 则为属性节点
text 文本节点：HTML 元素内的文本被称为文本节点
- 一个文本节点只包含一个字符串
- 换行符和空格在 HTML 元素中不会被忽略都是有效字符，它们会形成文本节点
comment 注释节点：在 HTML 中注释  为注释节点

<!DOCTYPE html>
<html lang="en"><!-- 根节点 -->
<head>
    <meta charset="UTF-8">
    <title>DOM树</title>
</head>
<body>
    <!-- 注释节点 -->
    文本内容 <!-- 文本节点 -->
    <div class="box">属性节点</div><!-- 属性节点 -->
</body>
</html>

3-2 常用节点

需要保证浏览器已经渲染了内容才可以读取的节点对象，不然无法读取到节点对象

document：DOM 操作的起始节点
document.documentElement：文档节点即 html 元素节点
document.body：body 元素节点
document.head：head 元素节点
document.links：超链接集合
document.anchors：所有锚点集合
document.forms：form表单集合
document.images：图片集合

<body>
    <!-- 链接 -->
    <a href="javascript:;">超链接</a>

    <!-- 锚点 -->
    <a href="#box">锚点</a>
    <a name="box" class="box">锚点</a>

    <!-- img -->
    <img src="https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/gold.981a5510.svg" alt="">

    <!-- form表单 -->
    <form action="">
        <input type="text" value="form表单">
    </form>

    <script>
        // document 操作文档起点
        // document.documentElement html根元素节点
        console.log(document.documentElement)
    
        // document 还能获取title标签 URL 域名 来源地址
        console.log(document.title);
        console.log(document.URL); 
        // http://127.0.0.1:5500/05-JavaScript/23-DOM/07-%E5%B8%B8%E7%94%A8%E8%8A%82%E7%82%B9.html#box
        console.log(document.domain); // 127.0.0.1
        console.log(document.referrer);
         // http://127.0.0.1:5500/05-JavaScript/23-DOM/07-%E5%B8%B8%E7%94%A8%E8%8A%82%E7%82%B9.html
    
        // 节点对象需要浏览器渲染了html才能读取
        console.log(document.body); // body元素节点
        console.log(document.head); // head元素节点
        console.log(document.links); // 所有超链接的集合
        console.log<

最低0.47元/天解锁文章

langmanboy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM 文档对象模型

DOM 文档对象模型1. Web API 的概念api：应用程序接口。是基于编程语言构建的结构，使开发人员更容易地创建复杂的功能Web API：是 Web 的应用程序编程接口，浏览器 API 可以扩展 Web 浏览器的功能，服务器 API 可以扩展 Web 服务器的功能js 组成：ECMAScript、DOM、BOMECMAScript：定义了 JavaScript 的语法规范BOM：浏览器对象模型，提供用于处理文档之外的所有内容的其他对象DOM：文档对象模型，提供用于处理文档的对象2
复制链接

扫一扫

专栏目录