DOM节点操作以及DOM中的事件

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

DOM：全称Document Object Model 文档对象模型
js操作html、xml文档的api
1998年10月
IE中的DOM对象是以COM对象的形式实现的
节点：Node–构成HTML文档最基本的单元
常用节点分为四类
1.文档节点：整个HTML文档
2.元素节点：HTML文档中的HTML标签
3.属性节点：元素的属性
4.文本节点：HTML标签中的文本内容
节点的属性

nodeNamenodeTypenodeValue
文档节点#document9null
元素节点标签名1null
属性节点属性名2属性值
文本节点#text3文本内容

实例化
1. 通过dom拿到我们想要的节点

var myDiv = document.getElementById("myDiv");
console.log(myDiv);
var div1 = document.getElementById("div1");
console.log(div1);
  1. 通过dom创建节点
// 创建一个li节点
var node = document.createElement("LI");
// 创建一个text节点
var textNode=document.createTextNode("Hello");
// 将text节点追加到li节点上
node.appendChild(textNode);
// 找到id为myDiv的节点
var myDiv = document.getElementById("myDiv");
// 将刚刚创建的node节点追加为myDiv的子节点
myDiv.appendChild(node);

1.Document类型
表示整个html文档
属性

body 直接指向body元素
html 获取html头部内容
title 获取文档标题
doctype 获取<!DOCTYPE>兼容性不太强 很少用
URL 获取完整的URL
domain 获取域名
referrer 获取链接到当前页面的那个页面的url
images 获取页面所有的img对象 返回值：HTMLCollection
forms 获取所有的form表单对象 返回值：HTMLCollection
links 获取文档中带有href属性的a元素

方法

getElementById("")
作用：通过元素的id获取元素节点
调用者：
参数：想要获取的元素id
返回值：找到的第一个元素，如果没有，返回null
getElementsByClassName("")
作用：通过元素的class name获取节点
调用者：document
参数：为一个字符串 表示元素的类名 可以由空格隔开
返回值：HTMLCollection list 包含一个或多个元素 可以使用数组的操作方式去处理结果
getElementsByTagName("")
作用：通过元素的元素名(标签名)找到对应的元素
调用者：document
参数：为一个字符串 表示元素的元素名(标签名)
返回值：HTMLCollection list 包含一个或多个元素 可以使用数组的操作方式去处理结果
getElementsByName("")
作用：通过元素的name属性找到对应的元素
调用者：document
参数：为一个字符串 表示元素name
返回值：NodeList list 包含一个或多个元素 可以使用数组的操作方式去处理结果

2.Element类型
属性

id 元素在文档中的唯一标识符
calssName 与元素的class特性相对应 可以重复 可以有多个 用空格分隔
title 与元素相关的附加说明信息
src
alt
获取或设置属性
设置属性：
node.calssName=“two”;//设置类名
node.setAttribute(“class”,“three”);//设置类名的第二种方式
setAttribute();
作用：给获取到的元素设置属性
调用者：要设置属性的元素
参数：两个参数 属性名 对应的值
返回值：
注意点：要设置的值存在的话，修改原来的值 不存在的话，添加

获取属性：
node.getAttribute(“class”)
作用：获取到相应元素的某个属性
调用者：元素
参数：属性名
返回值：对应的属性值
移除属性
myDiv.removeAttribute(“id”);
作用：移除相应元素的某个属性
调用者：元素
参数：属性名
返回值：
注意点：

创建元素

createElement();
作用：创建一个dom节点
调用者： document
参数：一个参数，要创建元素的标签名 在html中不区分大小写 但是XML中区分大小写
返回值：
注意点：要设置的值存在的话 修改原来的值 不存在的话，添加
var node = document.createElement(“LI”);
// 创建一个text节点
var textNode = document.createTextNode(“Hello”);
// 将text节点追加到li节点上
node.appendChild(textNode);

兄弟、孩子节点属性
firstElementChild 某个节点的第一个孩子元素节点
lastElementChild 某个节点的最后一个孩子元素节点
nextElementSibling 某个节点的下一个兄弟元素节点
previousElementSibling 某个节点的上一个兄弟元素节点
childElementCount 该节点子元素的数量
innerHtml 该元素的内容
textContent 该元素内部的text

innerHtml和innerText的异同点
都能获取和改变元素里面的内容
innerHtml:识别html标签 w3c标准 保留空格和换行的
innerText:不识别html标签 非标准 去除空格和换行
这两个属性是课读写的 可以获取元素里面的内容
3. Text类型

方法作用调用者参数返回值
length文本长度
appendData()追加文本文本节点要追加的文本内容追加后的文本
deleteData()删除文本文本节点两个参数(index_start，count)删除后的文本
insertData()插入文本文本节点两个参数(index_start，要插入的文本)插入后的文本
replaceData()替换文本文本节点三个参数(index_start，count，替换的文本)替换后的文本
splitText()将一个文本节点分为两个文本节点分割点的位置分割好的后面的文本节点
substringData()提取文本节点中的字符串文本节点两个参数(index_start，count)提取出来的字符串，(不改变原文本)
createTextNode()创建一个文本节点document文本内容text

insertDate();
var textNode = document.createTextNode(“hello,”);
textNode.insertData(6, “world!”)

replaceData();
var textNode = document.createTextNode(“hello,”);
textNode.replaceData(0, 2, “-”); // “-llo,”

splitText();
var textNode = document.createTextNode(“helloworld”);
console.log(textNode); // “hello”
console.log(textNode.splitText(5)); // “world”

substringData();
var textNode = document.createTextNode(“helloworld”);
console.log(textNode.substringData(0, 5)); // hello
console.log(textNode); // “helloworld”

createTextNode();
注意点： var textNode = document.createTextNode(“helloworld”);

4. Comment类型

注释：
html
CSS /* /
JS // / */
方法：
createComment();
作用：创建注释节点
var cNode = document.createComment(“这是一个注释”);

DOM节点操作的方法

1. 创建节点
document.createElement("TagName");
// var myDiv = document.createElement('div');
2. 给节点添加文本内容
// myDiv.innerText = "这是新创建的div";
// 3. 找到页面上的一个节点
var rootDiv = document.getElementsByTagName("div")[0];
// console.log(rootDiv);
// 4. 将myDiv追加到rootDiv上
rootDiv.appendChild(myDiv);

常用方法：

1.appendChild()
父节点.appendChild(新的子节点);
作用：将节点作为子节点追加到调用它的节点的后面
调用者：父节点
参数：要追加的新节点
注意：任何dom节点不能同时出现在文档的多个位置，如果追加的节点是原本存在的，那只会改变节点位置

2.insertBefore();
父节点.insertBefore(新节点，旧节点);
作用：将新的节点插入到之前某一个节点的前面
调用者：父节点
参数：要插入的新节点，旧节点

3.removeChild()
父节点.removeChild(要删除的子节点);
作用：删除某个子节点
调用者：父节点
参数：要删除的子节点
// rootDiv.removeChild(childNode);
4. replaceChild()
父节点.replaceChild(新节点，旧节点);
作用：使用指定的子节点替换已有的新节点

5.cloneNode（）
要复制的节点自身.cloneNode(boolean);
作用：复制节点
调用者：要复制的节点自身
参数：一个可选参数 boolean 默认为false 浅克隆 只复制标签
如果为true 那就是深克隆 会复制标签和内容
// var cloneChildNode = childNode.cloneNode(true);

事件

事件就是文档或浏览器窗口中发生 的一些特定的交互瞬间
事件三要素
事件源：事件被触发的对象
事件处理程序：通过一个函数赋值的方式完成
事件类型：如何触发 什么触发 （点击，按下等）
执行事件步骤： 1.获取事件源
2.绑定事件
3.添加事件处理程序
事件流（页面接收事件的顺序）

  1. 事件冒泡
    特点：从内往外传递
    事件由一个具体的元素接收，然后又逐步传递到不具体的节点(当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发)
    注意：元素需要嵌套，每层元素都绑定事件
    阻止事件冒泡event.stopPropagation();在哪个元素要阻止就在哪个元素里添加
  2. 事件捕获
    特点：从外往内传递
    事件由不太具体的节点接收到，然后传递到具体的节点上

事件处理程序
事件就是用户或浏览器自身执行的某种动作，响应某个事件的函数为事件处理程序，事件处理程序以"on"开头
作用：绑定事件
例如：onclick，onmouseover，onload …
节点：可以是div 也可以是button
1.非IE事件处理程序

addEventListener()
 作用：绑定事件监听器
 参数：
    1. 事件类型（click mouseover 等）
    2. 事件处理函数 当绑定的事件被触发时 要执行的操作
    3. boolean？ 用来决定事件流类型 事件冒泡false  事件捕获true 

removeEventListener()
作用：移除事件
参数：
    1. 事件名
    2. 事件处理函数 
    3. boolean？ 事件冒泡false  事件捕获true

2.IE事件处理程序

 attachEvent()
     作用：事件绑定
     参数： 事件处理程序名称
           事件处理函数
 detachEvent()
     作用：事件移除 
     参数：事件处理程序名称
          事件处理函数
          事件处理程序都被添加到冒泡阶段

事件对象 event
在触发DOM的某个事件时 会产生一个事件对象 event
这个包含所有与事件相关的信息
浏览器默认会把event传入到事件处理函数中
event对象的属性都是只读属性

属性类型说明
typeString事件类型，需要一个函数，处理多个事件时，可使用该属性
bubblesBoolean事件是否冒泡
cancelableBoolean是否可取消事件默认行为
targetElement事件目标

事件类型
1.鼠标事件

触发条件
click点击鼠标的主按钮 点击触控板
dblclick双击鼠标的主要按钮
mousedowm任意鼠标按钮按下时触发
mouseup任意鼠标按钮抬起（释放）时触发
mousemove鼠标在元素内部移动时会重复触发
mousewheel滚轮事件
mouseover鼠标位于元素外部，将其首次移入另一个元素边界之内时触发（支持子元素）
mouseenter鼠标光标从元素外部首次移动到元素范围内激发，不冒泡（不支持子元素）
mouseout在位于元素上方的鼠标光标移入到另外一个元素中（支持子元素）
mouseleave在位于元素上方的鼠标光标移动到元素范围之外时触发（不支持资源）

2.焦点事件

触发条件
blur元素失去焦点的时候触发
focus元素获得焦点的时候触发，不支持冒泡

3.UI事件

触发条件
load在页面完全加载后会在window上触发这个事件，如果是图像加载完成后 会在img元素上触发window.onload
unload在页面完全卸载后会在window上触发这个事件
select当用户选择文本框中的字符时会触发
resize当浏览器窗口被调整宽高时会触发 会重复触发
scroll滚动条滚动时会触发 会重复触发

4.键盘事件

触发条件
keydown按下键盘任意键触发 如果按住不放会重复触发
keypress按下键盘字符键触发
keyup释放按键时触发

事件代理
将事件绑定当前元素的父元素上，这时候点击当前元素时，就会执行父元素上绑定的事件处理函数
好处：父元素代理子元素的事件，子元素可以动态添加，不用频繁的去绑定事件
可以通过 event.target 获得当前元素

Java系列课程第三十六天 （DOM节点操作、事件对象与BOM）
java_YHkaifa的博客
05-16 176
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元素事件流）
赵佳敏的博客
12-02 809
一、dom元素事件类型 原生js事件全部以on开头 1. window事件 2. 鼠标事件 3. 键盘事件 4. 表单事件 二、dom元素添加事件 在元素行内直接操作事件绑定 <button id="but" onclick="fun1()">按钮</button> <script> function fun1(){ console.log("123"); } </script> 若.
AntV G6 dom节点绑定事件问题
最新发布
zhou13528482267的博客
10-10 1177
问题： graph.on("node:click"， e => {})监听不到dom节点里面对应事件。比如dom节点里面自定义按钮和输入框，需要监听按钮点击和输入框聚焦事件。
为已有点击事件的dom元素添加点击事件,并控制事件函数执行的顺序
知无涯
04-01 5683
我们大家都知道,一个dom的事件流程是先经过事件捕获,然后到事件本身,最后是事件冒泡 事件捕获是从父级到子级 事件冒泡是从子级到父级 现在有个需求,页面有个按钮,本身已经有点击事件的处理逻辑了,内部逻辑我们也不知道. 现在的需求是 我们需要在点击按钮后执行原有的业务逻辑之前,先执行另一个函数 我们可以使用事件捕获来进行操作 具体操作如下 我们使用事件代理加事件捕获的方式,...
基本DOM节点操作
11-26
注意：换行在浏览器中作为text节点，需要进行过滤 element.firstChild：该元素的第一个子节点。 element.lastChild：该元素最后一个子节点。 3、父节点 element[removed] 4、兄弟节点 element.previousSibling：返回...
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
10-18
以上知识点涵盖了文件提供的关于JavaScript中DOM节点插入操作的主要概念和技术细节。掌握这些知识点，能够帮助开发者更有效地在Web页面上动态地添加、删除和修改节点，从而实现更丰富的用户交互和更动态的内容展示。
学习JS中的DOM节点以及操作
12-09
接下来，我们将深入探讨DOM节点的分类和操作方法。 1. **DOM节点类型**： - **元素节点（Element Node）**：代表HTML中的标签，如`<div>`、`<p>`等。元素节点是DOM树中最主要的部分，包含了其他类型的节点。 - **...
JQuery 选择器、DOM节点操作练习实例
10-19
综合以上，JQuery选择器、DOM节点操作练习实例的知识点包括JQuery选择器的使用，DOM节点操作的方法，以及事件处理。文档通过实际的代码示例，使读者能够更好地理解和掌握JQuery在实际开发中的应用，包括如何使用...
用于节点操作的API，颠覆原生操作HTML DOM节点的API
09-05
例如，你可以设计一个函数，接受节点、操作类型（如插入、删除、替换等）、以及操作参数，然后根据这些参数智能地执行相应的DOM操作。通过这种方式，你不仅可以实现innerHTML的通用化替换，还能方便地进行节点的增删...
javascript DOM、事件、事件流、节点操作、元素属性（笔记）
weixin_60547084的博客
02-16 1861
文章目录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系列之DOM事件
老__L的博客
07-18 1576
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。简单理解：触发— 响应机制。网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。
DOM 对元素的操作+节点操作+属性操作+事件操作
xy_is_fhh的博客
11-07 313
对于JavaScript，为了能够使JavaScript操作HTML、JavaScript就有了一套自己的dom编程接口 对于HTML，dom使得html形成一棵dom树。包含文档、元素、节点 我们获取过来的DOM元素是一个对象（object），所以称为文档对象模型 关于dom操作，我们主要针对于元素的操作，主要有创建、增、删、改、查、属性操作、事件操作 <!DOCTYPE html> <html> <head> <meta charset="utf
基于DOM对象-----节点和事件
qql960621的博客
03-24 207
1.节点 /** * 文档：document * 元素：页面中所有的标签，元素-----element 标签----元素----对象 * 节点：页面中所有的内容(标签，属性，文本(文字，换行，空格，回车))------Node * 根元素：html标签 */ /** * 节点的属性： * nodeType:节点的类型----1：标签；2：属性；3：文本 * nodeName:节点的...
DOM获取元素、事件基础、操作元素、节点操作
weixin_50723416的博客
03-29 298
什么是DOM? 文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML 或者XML）的标准编程接口。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容，结构和样式。 DOM树 文档：一个页面就是一个文档，DOM中使用document表示 元素：页面中的所有标签都是元素，DOM中使用element表示 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示。 DOM把以上都看作是对象，对象有很对属性和方法。 获取页面元素 根据ID 标签名获取 通
JavaScript——DOM（包括DOM简介、获取元素、事件基础、操作元素、节点操作）
蟹黄堡
05-23 612
DOM简介 文档对象模型（DOM），就是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 作用：通过这些DOM接口，可以改变网页的内容、结构和样式。 DOM树： （1）文档：一个页面就是一个文档，DOM中使用document表示 （2）元素：页面中所有标签都是元素，DOM中使用element表示 （3）节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示 （4）DOM把以上三种都看做是对象 获取元素 1.根据ID获取 使用getEle
DOM(二)：节点操作、事件高级
weixin_53912712的博客
01-06 810
节点操作、事件高级
JavaScript学习笔记(7)——DOM和事件
m0_52353966的博客
06-08 505
文档对象模型，通过DOM可以来任意来修改网页中各个内容，DOM把JS与网页联系起来文档 文档指的是网页，一个网页就是一个文档对象 对象指DOM将网页中的每一个节点都转换为对象， 转换完对象以后，就可以以一种纯面向对象的形式来操作网页了模型 模型用来表示节点和节点之间的关系，方便操作页面节点（Node） 节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点。虽然都是节点，但是节点的类型却是不同的。节点是网页所有对象的父类常用的节点文档节点 （Document），代表整个网页。
jQuery2_事件绑定+DOM操作
一个开发初学者的博客
03-31 371
回忆： 对象的获取： 1：$(“选择器”)—当前页，根据选择器能获取多少就获取多少 2:当前对象.过滤函数或者查找函数——找和当前对象有关的对象——第一个 兄弟 孩子 父亲等等… jquery对象——一个对象但是其中封装了一个就是数组。 ——操作都是函数： val():取值是区第一个 val(值)：赋值：给选中的所有标签全部都赋值 html() text() addClass：class属性值： class=“a” class=“a b” removeClass css：行内样式 prop：简化属
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值