课程来源:B站后盾人

有关DOM的介绍

在此引用一位大佬的博客的部分内容:
JS-DOM
https://blog.csdn.net/weixin_45077672/article/details/116693698?spm=1001.2014.3001.5501

1.什么是DOM

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言(HTML或者XML)的标准编程接口。
W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。

2.DOM树

文档:一个页面就是一个文档，DOM中使用document表示
元素:页面中所有标签都是元素，DOM中使用element表示
节点:网页中所有内容都是节点(标签、属性、文本、注释等)，DOM中使用node表示
DOM把以上内容都看做是对象

困扰新手的DOM加载问题

3.html
如果不加defer="defer",会找不到元素

<!DOCTYPE html>
<html lang="en"><head><!-- defer:内容渲染之后再来执行脚本内容 --><script src="3.js" defer="defer"></script></head><body><h2 id="hd">houdunren.com</h2></body>
</html>

3.js

const el = document.getElementById('hd')
console.log(el)

运行结果:

如果不加呢?

因为在页面渲染之前就加载了js,这个时候是找不到这个元素的.
将js语句放在body内的最下面试一试:

<!DOCTYPE html>
<html lang="en"><head><!-- defer:内容渲染之后再来执行脚本内容 --></head><body><h2 id="hd">houdunren.com</h2><script src="3.js" defer="defer"></script></body>
</html>

运行结果:

可见这个方法是可行的.

节点node的概念

所有东西都是节点,标签,属性,文本,均是节点(Node)
document.是节点的起始,节点是一个树状的关系
document.childNodes是所有的子节点

4.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /></head><body><h2>houdunren.com</h2><!-- 注释也是节点哦 --><script>// console.log(document.childNodes[1].childNodes)const h1 = document.childNodes[1].childNodes[2]// 节点类型是用数字进行表示的console.log('document.nodeType:', document.nodeType)console.log('h1.childNodes[0].nodeType:', h1.childNodes[0].nodeType)console.log('h1.childNodes[0]:', h1.childNodes[0])console.log('h1.childNodes[1].nodeType:', h1.childNodes[1].nodeType)console.log('h1.childNodes[1]:', h1.childNodes[1])//h1.childNodes包含些什么?定义的h1到底是啥?打印出来看一下,似乎是整个body 的内容~console.log('h1.childNodes:', h1.childNodes)</script></body>
</html>

运行结果:

容易忘记的是文本,注释也是节点

Node 节点对象的原型继承

重点看代码和console的输出
5.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>后盾人</title></head><body><h2 id="h2 id here">houdunren.com</h2><input type="text" id="inputId" value="后盾人" /></body>
</html>

我把script标签部分单独提出来,这样看起来直观一些.
可以分别关注body内有什么,再看看脚本里写了什么.
body内:一个h2标签,一个input标签.

<script>// h2 是一个对象const h2 = document.querySelector('h2')// 找它的原型对象:两种方法console.log('Object.getPrototypeOf(h2):', Object.getPrototypeOf(h2))console.log('h2.__proto__:', h2.__proto__)function prototype(el) {const prototypes = []prototypes.push(el.__proto__)// 为空就不用找了,"..."是解构赋值,展开结果.prototypes.push(...(el.__proto__ ? prototype(el.__proto__) : []))return prototypes}console.log('prototype(h2):', prototype(h2))console.log('h2.id:', h2.id)const input = document.querySelector('input')console.log('prototype(input):', prototype(input))</script>

const h2 = document.querySelector('h2')是获取h2标签
下面有找它的原型的方法,但是都比较老旧,并不这么用
.push():往这个数组末尾添加一个新的项
...:解构赋值:就是把它里面的东西展开
如果el.__proto__为空还要找,就会报错.

运行结果:

把h2改成h1:看看报错

通过prototype原型操作节点元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>通过prototype原型操作节点元素</title></head><body><h2 onclick="this.color('red')">houdunren.com</h2><h1 onclick="this.hide()">向军</h1><div onclick="this.color('blue')">this is div element</div><script>const h2 = document.querySelector('h2')const h1 = document.querySelector('h1')Node.prototype = Object.assign(Node.prototype, {color(color) {// this代表当前触发这个事件的对象this.style.color = color},hide() {this.style.display = 'none'},})console.log('h2.__proto__:', h2.__proto__)console.log('h1.__proto__:', h1.__proto__)// 东西没了,也不会报错</script></body>
</html>

观察:body里一共有3个元素一个h2,一个h1,和一个div
this代表当前触发这个事件的对象

运行结果:(点击前)

点击后

DOM相关内容(课程来源:B站后盾人)相关推荐

数据挖掘课程学习——序列模式发现相关内容调研
数据挖掘课程学习--序列模式发现相关内容调研本次实验完成"序列模式发现"的相关内容调研,主要内容包括:什么是序列模式发现:应用在哪些领域:经典的算法有哪些:应用在怎样的数据上:得 ...
B站回应视频监控被破解上传：下架相关内容封禁账号
1月18日消息,昨日晚间,哔哩哔哩(B站)官方微博发布公告称,"今日接到用户举报,称疑似有人使用非法手段破解摄像头,上传视频监控画面至B站.我们第一时间组织排查,下架了相关内容." ...
分析目前国内的内容管理系统重构工程机械站
国内PHP开源CMS内容管理系统从程序框架,模版加载到程序功能上都有很大的进步,大部分都采用了自定义模块,自定义模型的方式,同时提供各个CMS都提供不同的特色功能,CMS内容管理系统一直影响着互联网的 ...
软件项目管理相关内容1：项目介绍与背景 2：乙方投标书 3：合同 4：生存期模型 5：需求规格说明书 6：WBS 7：成本估算 8：甘特图 9：进度计划 10：质量计划 11：项目总结
软件项目管理相关内容内容太多只选取部分内容点击链接查看全部文档和项目 1:项目介绍与背景一.项目名称 (一)项目背景第二课堂被认为是实施素质教育的重要途径和有效方式,它能够能够培养学生与人相处 ...
计算机课做ppt的软件有哪些内容,课程内容计算机软件的基础知识.ppt
<课程内容计算机软件的基础知识.ppt>由会员分享,可在线阅读,更多相关<课程内容计算机软件的基础知识.ppt(15页珍藏版)>请在人人文库网上搜索. 1.数据结构,课程内容: ...
基于KNN的相关内容推荐
如果做网站的内容运营,相关内容推荐可以帮助用户更快地寻找和发现感兴趣的信息,从而提升网站内容浏览的流畅性,进而提升网站的价值转化.相关内容推荐最常见的两块就是"关联推荐"和&qu ...
Jsoup代码解读之二-DOM相关对象
转载自 Jsoup代码解读之二-DOM相关对象之前在文章中说到,Jsoup使用了一套自己的DOM对象体系,和Java XML API互不兼容.这样做的好处是从XML的API里解脱出来,使得代码精炼 ...
javascript基础系列：DOM相关的技术知识点
DOM及其基础操作 DOM: document object model 文档对象模型,提供一些属性和方法供我们操作页面中的元素获取DOM元素的方法 document.getElementById( ...
Django模板语言相关内容
Django模板语言相关内容 Django模板系统官方文档常用语法只需要记两种特殊符号: {{ }}和 {% %} 变量相关的用{{}},逻辑相关的用{%%}. 变量在Django的模板语言 ...

DOM相关内容(课程来源:B站后盾人)

有关DOM的介绍

1.什么是DOM

2.DOM树

困扰新手的DOM加载问题

节点node的概念

Node 节点对象的原型继承

通过prototype原型操作节点元素

DOM相关内容(课程来源:B站后盾人)相关推荐

最新文章

热门文章

DOM相关内容(课程来源:B站 后盾人)

有关DOM的介绍

1.什么是DOM

2.DOM树

困扰新手的DOM加载问题

节点node的概念

Node 节点对象的原型继承

通过prototype原型操作节点元素

DOM相关内容(课程来源:B站 后盾人)相关推荐

最新文章

热门文章

DOM相关内容(课程来源:B站后盾人)

DOM相关内容(课程来源:B站后盾人)相关推荐