DOM 文档对象模型

DOM 文档对象模型

1. Web API 的概念

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

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

js 组成:ECMAScriptDOMBOM

  • 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 文档对象模型

文档对象模型 DOMHTMLXML 文档的编程接口

  • 提供了对文档的结构化的表述,
  • 定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容
  • 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:该类的对象从未被创建,由可以接收事件、并且可以创建侦听器的对象实现,提供 addEventListenerremoveEventListener 等事件支持方法
    • Element 元素节点、document 文档节点和 window 对象部署了该类
    • XMLHttpRequestAudioNodeAudioContext 也部署了该类
  • Node:是所有 DOM 节点的基础(包含所有节点类型)
    • Node 类的对象从未被创建,提供 firstChildparentNode 等节点操作方法
  • Element:是 DOM 元素的基本类(包含所有元素节点)
    • 提供getElementsByTagNamequerySelector 等方法
  • HTMLElement:是所有 HTML 元素的基本类(包含所有 HTML 元素节点)
    • 提供childNodesnodeTypenodeNameclassNamenodeName等方法
  • 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 文档节点:documentDOM 操作的起始节点
  • 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 常用节点

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

  • documentDOM 操作的起始节点
  • document.documentElement:文档节点即 html 元素节点
  • document.bodybody 元素节点
  • document.headhead 元素节点
  • document.links:超链接集合
  • document.anchors:所有锚点集合
  • document.formsform表单集合
  • 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.
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值