DOM节点操作、事件对象与BOM

最新推荐文章于 2023-10-10 10:17:25 发布
最新推荐文章于 2023-10-10 10:17:25 发布
阅读量71 收藏
点赞数
文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60600640/article/details/123264193
版权

节点操作

  1. 、什么是节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点  document

每个 HTML 元素是元素节点

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点

  1. 、节点类型

通过noteType属性可以获取节点的类型

document的节点类型---9

标签的节点类型---1

属性的节点类型---2，getAttributeNode("属性"):获取元素的属性节点

文本的节点类型---3，元素的第一个子节点就是文本节点

  1. 、节点名称

通过nodeName可以获取元素的节点名称。

document的节点名称---#document

标签的节点名称---大写的标签名

属性的节点名称---属性名

文本的节点名称---#text

  1. 、节点值

通过nodeValue可以获取元素的节点的值。

document的节点值---null

标签的节点值---null

属性的节点值---属性值

文本的节点值---文本的内容

2.节点之间的关系

(1)、HTML DOM 节点树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

(2)、节点之间的关系

节点之间的关系就是嵌套关系（父子关系）、并列关系（兄弟关系）。注意区分节点与元素节点之间的区别。

父节点--parentNode

父元素节点--parentElement

子节点--childNodes：标签节点、文本节点、注释节点   得到的是伪数组

子元素节点--children :标签节点

第一个子节点--firstChild:文本

第一个子元素节点--firstElementChild：第一个标签

 最后一个子节点--lastChild:文本

最后一个子元素节点--lastElementChild: 最后一个标签

上一个子节点--previousSibling:文本

上一个子元素节点--previousElementSibling: 上一个标签

下一个子节点 --nextSibling:文本

下一个子元素节点--nextElementSibling: 下一个标签

总结：firstChild、lastChild、previousSibling、nextSibling获取到的都是文本，如果没有就是文本节点名称#text， firstElementChild、lastElementChild、previousElementSibling、nextElementSibling获取到的都是标签，如果没有就是空。

(3)、节点隔行换色

我们之前学过的隔行换色都是通过遍历伪数组然后奇偶数判断，或者循环累加时+2等，现在我是利用节点之间的关系以及节点的名称值等实现隔行换色的效果

第一种：奇偶数判断

第二种：累加2

元素节点

第四种：节点操作

(4)、插入节点

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

提示： 如果你想创建一个新的文本列表项，在 LI 元素后你应该添加元素的文本节点，然后在列表中添加 LI元素。

你也可以使用 insertBefore 方法来 插入/移除 已存在的元素。

node.insertBefore(newnode,existingnode) 参数newnode是要插入的节点对象，existingnode是要添加新的节点前的子节点。

  1. 创建元素的三种方式
  1. 、document.write()

弊端：只能往body中添加元素

document.write('<div class="box1">我是div</div>');

  1. 、innerHTML

弊端：在同级下只能添加一种元素，多个会覆盖

  document.getElementById("divObj").innerHTML = "<p>哈哈哈</p>";

  1. 、document.createElement()

父元素.appendChild(子元素)：给父元素末尾添加子元素（文本为createTextNode()）

  1. 、动态的创建列表

单击按钮，动态的创建无序列表，渲染在红色边框的box中.

思路：1、创建内容数组

  1. 获取元素，给按钮绑定单击事件
  2. 创建ul标签
  3. 将ul添加到box中
  4. 遍历数组
  5. 创建li标签
  6. 添加内容
  7. 按钮禁用
  8. 事件进阶
  9. 、事件三要素

事件源：是指那个元素引发的事件。比如当你点击cdsn图标的时候，会跳转到cdsn首页。那么这个cdsn图标就是事件源,再或者，可以这样理解， 当你对某个元素执行动作的时候，会触发一系列效果（动画，跳转....），那么这个元素就是事件源。

事件类型：例如，点击，鼠标划过，按下键盘，获得焦点。

事件驱动程序：事件驱动程序即执行的结果，例如，当你点击cdsn图标的时候，会跳转到cdsn首页。那么跳转到cdsn首页就是事件的处理结果。

执行事件的步骤：获取元素、绑定事件、书写事件驱动程序

  1. 、监听事件(对比onclick绑定点击事件)

绑定监听事件 addEventListener("事件的类型",事件的处理程序)

 解绑监听事件removeEventListener("事件的类型",事件的处理程序)

  1. 、事件对象

任何事件都有内置对象event，事件对象的兼容性写法为

  1. 、事件冒泡

什么是冒泡事件

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

假设一个元素div，它有一个下级元素p。

<div>

<p>元素</p>

</div>

这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？

如何阻止冒泡（存在兼容性）

e.stopPropagation(); 谷歌和火狐支持,

window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

  1. BOM

(1)、BOM的概念

BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，

比如：刷新浏览器、后退、前进、在浏览器中输入URL等

(2)、BOM的顶级对象

window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window注意：window下一个特殊的属性 window.name

(3)、对话框

alert()

prompt()

confirm()

(4)、加载事件

onload事件

onload 事件会在页面或图像加载完成后立即发生。

onload 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。

(5)、Location对象

常用属性

// //地址栏上#及后面的内容

// console.log(window.location.hash);

// //主机名及端口号

// console.log(window.location.host);

// //主机名

// console.log(window.location.hostname);

// //文件的路径---相对路径

// console.log(window.location.pathname);

// //端口号

// console.log(window.location.port);

// //协议

// console.log(window.location.protocol);

// //搜索的内容

// console.log(window.location.search);

(6)、History对象

//跳转的

my$("btn1").onclick = function () {

window.location.href = "15test.html";

};

//前进

my$("btn2").onclick = function () {

window.history.forward();

};

//后退

my$("btn").onclick = function () {

window.history.back();

};

(7)、Navigator对象

通过userAgent可以判断用户浏览器的类型

console.log(window.navigator.userAgent);

//通过platform可以判断浏览器所在的系统平台类型.

//console.log(window.navigator.platform);

演示示例：BOM

  1. 定时器

(1)、setInterval()

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

clearInterval()

clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。

clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。

//定时器

//参数1:函数

//参数2:时间---毫秒---1000毫秒--1秒

//执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数.....

//返回值就是定时器的id值

(2)、setTimeout()

另一个定时器定义和用法

方法用于在指定的毫秒数后调用函数或计算表达式。

提示： 1000 毫秒= 1 秒。

提示： 如果你只想重复执行可以使用 setInterval() 方法。

提示： 使用 clearTimeout() 方法来阻止函数的执行。

参数：param1回调函数，param2时间

返回值:  返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行

球场程序员
关注
Java系列课程第三十六天 （DOM节点操作、事件对象与BOM）
java_YHkaifa的博客
05-16 175
Day36 DOM节点操作、事件对象与BOM 1.节点操作 (1)、什么是节点 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 整个文档是一个文档节点 document 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 (2)、节点类型 通过noteType属性可以获取节点的类型 document的节点类型—9 console.log(document.nodeType);//9 标签的节点类型—1 var b
DOM中的节点、事件操作
Darlingmi的博客
06-10 481
一、节点层级 (1)获取子节点、子元素的方式 A、childNodes属性：返回当前节点的所有子节点的集合(NodeList),返回的节点包括元素、文本和其他节点。 B、children属性：只返回子元素节点的集合(HTMLCollection)。 C、firstChild属性：返回第一个子节点(元素节点或文本节点)。 D、firstElementChild属性：返回第一个子元素。 E、lastChild属性：返回最后一个子节点(元素节点或文本节点)。 F、lastElementChild属性：返回最后一个
DOM节点操作以及DOM中的事件
zy123r的博客
09-06 641
DOM：全称Document Object Model 文档对象模型 js操作html、xml文档的api 1998年10月 IE中的DOM对象是以COM对象的形式实现的 节点：Node–构成HTML文档最基本的单元 常用节点分为四类 1.文档节点：整个HTML文档 2.元素节点：HTML文档中的HTML标签 3.属性节点：元素的属性 4.文本节点：HTML标签中的文本内容 节点的属性 nodeName nodeType nodeValue 文档节点 #document 9 null
javascript DOM、事件、事件流、节点操作、元素属性（笔记）
weixin_60547084的博客
02-16 1858
文章目录1. 认识DOM2. 获取元素2.1 通过标签名获取2.2 通过ID获取2.3 通过类名获取2.4 H5新增的获取方式2.5 特殊元素的获取3. 事件3.1 事件三要素3.2 事件类型3.3 注册事件3.4 删除事件3.5 事件流3.6 鼠标事件对象3.7 键盘事件对象3.8 事件委托(事件代理)4. 元素自定义属性4.1 默认的自定义属性4.2 h5新增的自定义属性5. 节点操作5.1 节点类型5.2 获取父元素5.3 获取子元素5.4 获取兄弟元素5.5 添加节点对象5.6 删除节点5.7 克隆
DOM(二)：节点操作、事件高级
weixin_53912712的博客
01-06 801
节点操作、事件高级
DOM与BOM进阶：ID与CLASS、节点操作与事件绑定
"c认证web进阶dom与bom" 本文主要探讨了DOM（Document Object Model）和BOM（Browser Object Model）在Web开发中的应用，以及ID和CLASS的区别。DOM是HTML和XML文档的结构化表示，而BOM则涉及浏览器窗口的交互。 ID...
DOM和BOM的使用
01-08
元素节点对象是指 DOM 中的元素节点对象，它提供了许多方法和属性，开发者可以通过这些方法和属性来操作文档的内容和结构。 innerHTML innerHTML 是指 DOM 中的 innerHTML 属性，它允许开发者通过 JavaScript 修改...
IE事件对象详解：window.event与DOM节点操作
这种设计允许开发者在处理各种浏览器事件时，如鼠标点击、键盘输入等，轻松获取和操作与事件相关的属性和方法。 事件对象（event object）是JavaScript中处理用户交互的核心，它包含了有关事件的所有相关信息，如...
javascript学习基础笔记之DOM对象操作
01-19
访问HTML元素的基本步骤通常涉及查找特定的DOM节点。例如，`document.documentElement`属性用于获取文档的根元素，即`<html>`标签。一旦有了这个引用，我们就可以进一步访问其子元素。比如，`<head>`和`<body>`可以...
JavaScript学习笔记(7)——DOM和事件
m0_52353966的博客
06-08 504
文档对象模型，通过DOM可以来任意来修改网页中各个内容，DOM把JS与网页联系起来文档 文档指的是网页，一个网页就是一个文档对象 对象指DOM将网页中的每一个节点都转换为对象， 转换完对象以后，就可以以一种纯面向对象的形式来操作网页了模型 模型用来表示节点和节点之间的关系，方便操作页面节点（Node） 节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点。虽然都是节点，但是节点的类型却是不同的。节点是网页所有对象的父类常用的节点文档节点 （Document），代表整个网页。
AntV G6 dom节点绑定事件问题
最新发布
zhou13528482267的博客
10-10 1160
问题： graph.on("node:click"， e => {})监听不到dom节点里面对应事件。比如dom节点里面自定义按钮和输入框，需要监听按钮点击和输入框聚焦事件。
day35 DOM操作
weixin_46311092的博客
05-17 216
DOM概念 事件基础文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。 DOM又称为文档树模型 文档：一个网页可以称为文档 节点：网页中的所有内容都是节点（标签、属性、文本、注释等） 元素：网页中的标签 属性：标签(元素)的属性 获取元素的方式 1、根据id获取元素 var div1 = document.getElementById("box1"); 2、通过类名获取元素 var p1Arr = document.getEl
javascript学习笔记dom-获取元素，事件，操作元素
weixin_43412366的博客
03-11 201
DOM简介 DOM：文档对象模型 获取元素 console.dir() 打印返回的元素对象查看里面的属性和方法 根据ID获取 document.getElementById(); 根据标签名获取 getElementsByTagName()方法可以返回带有指定标签的对象的集合,以伪数组的形式存储 根据标签名获取 element(父元素).getElementsByTagName(‘标签...
DOM事件机制
冰霜的博客
09-11 411
事件机制 HTML DOM 允许 JavaScript 对 HTML 事件作出反应。JavaScript 能够在事件发生时执行，比如当用户点击某个 HTML 元素时。 为了在用户点击元素时执行代码，请向 HTML 事件属性添加 JavaScript 代码： <div id='div1'>我是一个div</div> <button id='btn'>点我啊</button> <!-- 还可以在HTML标签中进行事件的绑定 需要加()--> <.
DOM中监听节点变化的事件(变动事件)的用法 — 第13.4.6节
热门推荐
flyingpig2016的博客
12-16 3万+
DOM变动事件用法
JS（七）：JS的DOM节点、Event（事件）
白骨梦儿
06-21 1564
一、什么是DOM DOM是W3C(万维网联盟)的标准。DOM定义了访问HTML和XML文档的标准。 "W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容，结构和样式。" W3C DOM标准被分为3个不同的部分： 核心DOM-针对任何结构化文档的标准模型 XML DOM-针对XML文档的标准模型 HTML DOM-针对HTML文档的标准模型 ...
JQuery对Dom节点操作以及事件操作
MrLee的博客
05-29 2712
1.查找节点获取p节点var $pDm=$("p");输出p节点的title属性alert($pDm.attr("title")); //获取第2个li节点    var $li_2=$("ul li:eq(1)"); //输出第2个li节点的title属性alert($li_2.attr("title"));//输出第2个li节点的文本内容alert($li_2.html());2.创建节点创建...
JavaScript(七十) jquery(二)
weixin_44730244的博客
06-22 197
jquery常用的方法 筛选结点 .filter() 过滤：对我们已经获取到的网页元素进行过滤，选择符合（）内条件的元素。 .not() 反过滤：选择与filter相反的元素，选择不符合（）内条件的元素。 .has（）拥有，直接判定该节点是否是否有符合条件的子节点元素，如果有，该节点被选中（注：不是子节点，而是父节点） .next() 选择同级节点的下一个元素节点（类似于nextElementSibling） .prev() 选择同级节点的下一个元素节点（类似于previousElementSib
列表标签：有序列表，无序列表与自定义列表
blish的博客
03-04 549
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值