DOM

DOM

日考

一、JS包含哪几部分：ES BOM DOM

二、什么是BOM：BOM即浏览器对象模型，BOM是操作浏览器的接口(API)。

三、BOM有几大对象？

  • 窗口(window)

  • 历史记录(histroy)

  • 地址栏(location)

  • 版本信息(navigator)

  • 屏幕(screen)

四、什么是DOM：DOM即文档对象模型，DOM是操作文档的接口(API)

五、DOM有几大对象？

  • 文档对象：document

  • 元素对象：element

  • 文本对象：text

  • 属性对象：Attribute

  • 节点对象：node

JS包含哪几部分

  • ES：一门语言，学习ES学习的是语法。（ECMA：欧洲计算机协会ECMAScript）

  • BOM：浏览器对象模型 用途：提供给ES一个接口来操作浏览器

  • DOM：文档对象模型 用途：提供ES一个接口来操作文档

BOM是什么

  • BOM：Browser Object Model 浏览器对象模型

  • BOM把浏览器的一切的定义成了一个对象模型

    • Window：整个浏览器定义成了windonw对象

      • domument：把文档定义成了一个对象

      • Histroy：把历史记录定义成了对象

      • Sreen：把显示浏览器窗口的屏幕定义成了对象

      • Location：把地址栏定义成了对象

      • Navigtor：把浏览器的介绍信息定义成了一个对象

  • BOM用途：允许ES操作浏览器的一切。

  • BOM目前没有标准。

DOM是什么

  • DOM：Dcoument Object Model 文档对象模型

  • 用途：DOM就是为了操作文档用的。

  • 在DOM眼里，整个文档内容都是对象。

  • DOM把文档的一切内容都定义成了对象

    • 文档是对象

    • 元素是对象

    • 文本是对象

    • 属性是对象

    • 样式是对象

  • DOM是W3C制定的一套标准

DOM树

71da2a630f615d07b154e1a01e025b5.png

  • document对象

  • element对象

  • attribute对象

  • text对象

  • node对象

Document对象

定义

  • 表示：Document对象表示网页文档。

  • 地位：Document对象是DOM的核心对象。

  • 用途：Document对象是访问文档的入口。

用途

Document对象主要用途是操作文档，具体内容如下：

  • 查：获取元素

  • 增：创建新元素

  • 删：删除元素

  • 改：替换元素

获取元素的方法

传统方法

  • 通过id获取元素：getElementByid()

    <pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n123" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;" lang="js">window.document.getElementById('id')
    //等同于
    document.getElementById('id')</pre>

  • 通过标签名获取元素：getElementByTagName('标签')

    <pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n126" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;" lang="js">window.document.getElementByTagName('tag')
    //等同于
    document.getElementByTagName('tag')</pre>

    element.getElementsByTagName('标签')

    <pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n128" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;" lang="js">const ul1 = document.getElementById('ul1')
    const arr2 = ul1.getElementsByTagName('li') //通过element获取
    console.log(arr2)</pre>

H5新增方法

  • 通过class获取元素：

    • document.getElementsByClassName('class')

    • element。getElementsByClassName('class')

  • 通过css选择器获取元素：document.querySelector('selector')

  • 通过css选择器获取元素：

    • document.querySelectorAll('selector')

    • element.querySelectorAll('seletor')

特殊方法

  • document.documentElement：获取文档中的html元素

  • document.body：获取文档中<body>元素

  • document.head：获取文档中的<head>元素

  • document.title：获取文档中<title>元素

  • document.links：获取文档中的<a>元素

  • document.images：获取文档中的<img>元素

操作文档内容

在获取完元素之后，接下来我们学习原属对象之间的关系。DOM定义了两套API：

  • Node API（节点API）：把DOM树中的对象看成节点(node)树。

  • Element API（元素API）：把DOM树种的对象看出元素树。

Node API

定义

Node API把文档的一切对象看出是节点(node)。Node对象是Node API的核心的对象。

用途

  • 查找节点的基本信息：节点名称、节点类型、节点的值

  • 查找节点之间的关系：父子、兄弟

  • 操作节点：增、删、改、查

三大基本属性

Node.nodeType

定义：nodeType并表示节点的类型。节点类型使用一个数字表示。Node API把节点类型分为了9种：

节点名称 数字表示
元素节点 1
属性节点 2
文本节点 3
注释节点 8
文档节点 9

Node.nodeName

Node.nodeValue

节点定义

父节点：一个节点之上的直接节点

子节点：一个节点之下的直接节点

兄弟节点：具有相同父节点的节点

后代节点：一个节点之下的所有层级的节点

查找节点关系

  • Node.parentNode：返回当前节点的父节点对象

  • Node.childNodes：返回当前节点的子节点列表

  • Node.nextSibling：返回当前节点的下一个兄弟节点

  • Node.previousSibling：返回当前节点的上一个节点

  • Node.firstChild：返回当前节点的第一个子节点

  • Node.lastChild：返回当前节点的最后一个子节点

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • DOM和BOM
    2js组成 我们都知道，javascript有三部分构成，ECMAScript，DOM和BOM，根据宿主（浏览器）...
    微笑_edac阅读 436评论 0赞 0
  • 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记
    之前通过深入学习DOM的相关知识，看了慕课网DOM探索之基础详解篇这个视频（在最近看第三遍的时候，准备记录一点东西...
    微醺岁月阅读 4,522评论 2赞 61
  • 2023-02-10 DOM
    日考题1.js包含哪几部分ESBOMDOM 2.什么是BOMBOM即浏览器对象模型，BOM是操作浏览器的接口(AP...
    归于无阅读 101评论 0赞 0
  • dom
    DOM BOM ES 日考： 1.js包含那几个部分：es bom dom 2.什么是BOM：BOM是浏览器的模型...
    北穆川阅读 117评论 0赞 1
  • DOM
    日考 一：js包括哪几部分？ DOM BOM ES 二：什么是DOM？ DOM：文档对象模型 DOM是操作文档的...
    败于化纤阅读 179评论 0赞 0