dom

DOM BOM ES

日考:

1.js包含那几个部分:es bom dom

2.什么是BOM:BOM是浏览器的模型 BOM提供给ES一个操作浏览器的接口

3.BOM有几大对象

  • 屏幕(screen)

  • 窗口(window)

  • 历史记录 (histroy)

  • 地址栏

  • 版本信息

4.什么是DOM:DOM是文档对象模型 ,DOM是文档一个接口操作文档

5.DOM有几大对象?

  • 文档对象

  • 元素对象

  • 文本对象

  • 属性对象

  • 节点对象

js包含哪几部分

  • ES:一门语言,学习ES学习的是语法(ECMA:欧洲计算机协会ecmascript)

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

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

BOM

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

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

    • window:把文档看出一个对象

    • Histroy:把历史记录定义成了一个对象

    • Screen:把显示浏览器窗口的屏幕定义成一个对象

    • Location:把地址定义成一个对象

    • Navigator:把浏览器的介绍信息定义成一个对象

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

  • BOM目前没有标准

DOM

  • DOM:Dcoument Object model 文档对象模型

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

  • 在DOM眼里,整个文档的内容都是对象

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

    • 文档是对象

    • 元素是对象

    • 文本是对象

    • 属性是对象

    • 样式是对象

  • DOM是W3c制定的一套标准

[图片上传失败...(image-d1fb7a-1676033812914)]

Document对象

定义

  • 表示:document对象表示网页文档

  • 地位:document对象是DOM的核心对象

  • 用途:document对象是访问文档的入口

用途

document对象主要用途:

  • 查:获取元素

  • 增:创建元素

  • 删:删除元素

  • 改:替换元素

获取元素的方法

传统方法

  • 通过id获取元素

    getElementByle()

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n1211" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 1.125rem; 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(255, 255, 255); position: relative !important; color: rgb(122, 122, 122); padding: 0.5rem 1.125em; margin-bottom: 0.88em; border: 1px solid rgb(122, 122, 122); line-height: 1.5rem; width: inherit; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="js">window.document.getElementByle('id')
//等同于
document.getElementByid('id')</pre>

  • 通过标签名获取元素

    getElementsByTagName('标签')

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n1216" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 1.125rem; 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(255, 255, 255); position: relative !important; color: rgb(122, 122, 122); padding: 0.5rem 1.125em; margin-bottom: 0.88em; border: 1px solid rgb(122, 122, 122); line-height: 1.5rem; width: inherit; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="js">window.document.getElementsByTagName('标签')</pre>

H5新增方法

特殊方法

  • document.docymentElement:获取文档中的<html>元素

  • document.body:获取文档中的body元素

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

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

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

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

操作文档内容

在获取元素之后,我们要学习元素对象之间的关系。DOM定义了两套API:

  • Node API(节点):把DOM树中的对象看成节点

  • Element API(元素API):把DOM树中的对象看出元素树

Node API

定义

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

用途

  • 查找节点的基本信息:名称,类型,值

  • 节点之间的关系:父子,兄弟

  • 操作节点:增,删,改,查

Node.nodeType

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

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

1:元素节点

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n1274" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 1.125rem; 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(255, 255, 255); position: relative !important; color: rgb(122, 122, 122); padding: 0.5rem 1.125em; margin-bottom: 0.88em; border: 1px solid rgb(122, 122, 122); line-height: 1.5rem; width: inherit; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="js">console.log(document.documentElement.nodeType) //1</pre>

2:属性节点元素.getAttributeNode("属性名"):方法从当前元素中通过名称获取属性节点

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n1276" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 1.125rem; 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(255, 255, 255); position: relative !important; color: rgb(122, 122, 122); padding: 0.5rem 1.125em; margin-bottom: 0.88em; border: 1px solid rgb(122, 122, 122); line-height: 1.5rem; width: inherit; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="js"> console.log(document.body.getAttributeNode("id").nodeType)//2</pre>

3:文本节点:childNodes,属性可返回指定节点的子节点的节点列表

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n1278" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 1.125rem; 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(255, 255, 255); position: relative !important; color: rgb(122, 122, 122); padding: 0.5rem 1.125em; margin-bottom: 0.88em; border: 1px solid rgb(122, 122, 122); line-height: 1.5rem; width: inherit; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="js"><body id="home">
<h2>二级标题</h2>

<script>
//获取文本节点的方法
const arr = document.body.childNodes
console.log(arr[0].nodeType)//3
</script></pre>

8:注释节点:childNodes,属性可返回指定节点的子节点的节点列表

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n1280" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 1.125rem; 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(255, 255, 255); position: relative !important; color: rgb(122, 122, 122); padding: 0.5rem 1.125em; margin-bottom: 0.88em; border: 1px solid rgb(122, 122, 122); line-height: 1.5rem; width: inherit; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="js"><body id="home">
<h2>二级标题</h2>

<script>
//获取注释节点的方法
const arr = document.body.childNodes
console.log(arr[3].nodeType)//8
</script></pre>

9:文档节点:

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n1282" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 1.125rem; 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(255, 255, 255); position: relative !important; color: rgb(122, 122, 122); padding: 0.5rem 1.125em; margin-bottom: 0.88em; border: 1px solid rgb(122, 122, 122); line-height: 1.5rem; width: inherit; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="js"> console.log(document.nodeType)//=9</pre>

节点定义

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

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

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

后代节点:一个节点之下所有成绩的节点

查找节点关系

  • Node.childNodes:属性可返回指定节点的子节点的节点列表

  • 元素.getAttributeNode("属性名"):方法从当前元素中通过名称获取属性节点

  • Node.arentNode:返回当前节点的父节点对象

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

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

  • Node.previousSibling:返回当前节点的上一个兄弟节点

  • Node.firstChid:返回当前节点的第一个节点

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

Array.from(伪数组)

  • 将伪数组转成真数组

<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" cid="n1311" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Menlo, Monaco, "Courier New", monospace; font-size: 1.125rem; 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(255, 255, 255); position: relative !important; color: rgb(122, 122, 122); padding: 0.5rem 1.125em; margin-bottom: 0.88em; border: 1px solid rgb(122, 122, 122); line-height: 1.5rem; width: inherit; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;" lang="js">Array.form(document.images//把伪数组转成真正的数组)</pre>

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

推荐阅读更多精彩内容

  • 2js组成 我们都知道,javascript有三部分构成,ECMAScript,DOM和BOM,根据宿主(浏览器)...
    微笑_edac阅读 441评论 0 0
  • 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西...
    微醺岁月阅读 4,533评论 2 61
  • 日考 一:js包括哪几部分? DOM BOM ES 二:什么是DOM? DOM:文档对象模型 DOM是操作文档的...
    败于化纤阅读 179评论 0 0
  • JS包含哪几部分? ES:一门语言,学习ES,学习的是语法。(ECMA:欧洲计算机协会 ECMAScript) B...
    烂好人_5b0f阅读 215评论 0 1
  • BOM是浏览器对象模型,DOM是文档对象模型;前者是对浏览器本身进行操作,而后者是对浏览器(可看成容器)内的内容进...
    learninginto阅读 313评论 0 9