Loading [MathJax]/jax/input/TeX/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Javascript的DOM操作

Javascript的DOM操作

作者头像
全栈程序员站长
发布于 2021-11-18 03:01:20
发布于 2021-11-18 03:01:20
6980
举报

1.訪问节点 document.getElementById(id); 返回对拥有指定id的第一个对象进行訪问

document.getElementsByName(name); 返回带有指定名称的节点集合 注意:Elements

document.getElementsByTagName(tagname); 返回带有指定标签名的对象集合 注意:Elements

document.getElementsByClassName(classname); 返回带有指定class名称的对象集合 注意:Elements

2.生成节点 document.createElement(eName); 创建一个节点

document.createAttribute(attrName); 对某个节点创建属性

document.createTextNode(text); 创建文本节点

3.加入�节点 document.insertBefore(newNode,referenceChild); 在某个节点前插入节点

parentNode.appendChild(newNode); 给某个节点加入�子节点

4.复制节点 cloneNode(true | false); 复制某个节点 參数:是否复制原节点的全部属性

5.删除节点 parentNode.removeChild(node) 删除某个节点的子节点 node是要删除的节点 注意:IE会忽略节点间生成的空白文本节点(比如,换行符号),而Mozilla不会这样做。在删除指定节点的时候不会出错,可是假设要删除最后一个子结点或者是第一个子结点的时候,就会出现故障。这时候,就须要用一个函数来推断首个子结点的节点类型。 元素节点的节点类型是 1,因此假设首个子节点不是一个元素节点,它就会移至下一个节点,然后继续检查此节点是否为元素节点。整个过程会一直持续到首个元素子节点被找到为止。通过这种方法,我们就能够在 Internet Explorer 和 Mozilla 得到正确的方法。

6.改动文本节点 appendData(data); 将data加到文本节点后面

deleteData(start,length); 将从start处删除length个字符

insertData(start,data) 在start处插入字符,start的開始值是0;

replaceData(start,length,data) 在start处用data替换length个字符

splitData(offset) 在offset处切割文本节点

substringData(start,length) 从start处提取length个字符

7.属性操作 getAttribute(name) 通过属性名称获取某个节点属性的值

setAttribute(name,value); 改动某个节点属性的值

removeAttribute(name) 删除某个属性

8.查找节点 parentObj.firstChild 假设节点为已知节点的第一个子节点就能够使用这种方法。此方法能够递归进行使用 parentObj.firstChild.firstChild…..

parentObj.lastChild 获得一个节点的最后一个节点,与firstChild一样也能够进行递归使用 parentObj.lastChild.lastChild…..

parentObj.childNodes 获得节点的全部子节点,然后通过循环和索引找到目标节点

9.获取相邻的节点 neborNode.previousSibling :获取已知节点的相邻的上一个节点 nerbourNode.nextSlbling: 获取已知节点的下一个节点

10.获取父节点 childNode.parentNode:得到已知节点的父节点

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/119062.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
DOM(文档对象模型)基础加强
DOM(文档对象模型)基础加强 文档:标记型文档 对象:封装了属性和行为的实例,可以直接被调用。 模型:所有的标记型文档都具有一些共性特征的一个体现。    用来将标记型文档封装成对象,并将标记型文档中的所有内容(标签、文本、属性)都封装成对象。    封装成对象的目的:是为了更方便的操作这些文档及其文档中的所有内容。因为对象包含属性和行为。 标记型文档包含标签、属性、标签中封装的数据。只要是标记型文档,DOM这种技术都可以对其进行操作。 常见的标记型文档包括:HTML、XML。 DOM要操作标记型
黑泽君
2018/10/11
8400
DOM(文档对象模型)基础加强
javascript 操作dom
Node往往被翻译为节点,在一个对象(可以简单的理解为是HTML页面中),一个属性name="aaa"可以是一个节点,一个< div id="aaa">……< /div>也可以是一个节点,在< body>……< /body>中的,也是一个大大的节点。下面是一些有关Node的属性和方法,并没有包含部分不兼容IE和FF内容的讲解。
jack.yang
2025/04/05
390
JavaScript DOM基础2
DOM自身存在很多类型,比如Element类型:表示的是元素节点,再比如Text类型:表示的是文本节点。DOM也提供了一些扩展功能。 一.DOM类型 DOM基础课程中,我们了解了DOM的节点并且了解怎样查询和操作节点,而本身这些不同的节点,又有着不同的类型。 DOM类型 类型名 说明 Node 表示所有类型值的统一接口,IE不支持 Document 表示文档类型 Element 表示元素节点类型 Text 表示文本节点类型
汤高
2018/01/11
8670
JavaScript DOM基础
DOM(Document Object Model)即文档对象模型,针对HTML和XML文档的API(应用程序接口)。 一.DOM介绍 DOM中的三个字母,D(文档)可以理解为整个Web加载的网页文档;O(对象)可以理解为类似window对象之类的东西,可以调用属性和方法,这里我们说的是document对象;M(模型)可以理解为网页文档的树型结构。 DOM有三个等级,分别是DOM1、DOM2、DOM3,并且DOM1在1998年10月成为W3C标准。DOM1所支持的浏览器包括IE6+、Firefox、Safa
汤高
2018/01/11
1.4K0
DOM笔记2
<!– 节点类型检查 if(someNode.nodeType==ElementNode){ alert(“Node is an element”); } 或者 if(someNode.nodeType==1){ alert(“Node is an element”); } 使用nodeName和nodeValue这两个属性 if(someNode.nodeType==1){ var someNode.nodeName();//nodeName的值是元素的标签名 } 每一个节点都有一个childNodes属性。当中保存NodeList对象,NodeList是一种类型数组对象,用于保存一组有序的节点 这个对象也有length属性,能够通过位置来訪问这些节点 var firstChild=someNode.childNodes[0]; var secondChild=someNode.childNodes.item(1); var length=someNode.childNodes.length; 每一个节点都有一个parentNode属性。该属性指向文档树中的父节点 if(someNode.nextSibling===null){ alert(“last node in the parent’s childNodes list…”); }else if(someNode.previousSibling===null){ alert(“First node in the parent’s childNodes list…”); 假设列表中仅仅有一个节点,那么该节点的nextSibling和previousSibling都为null } 父节点和第一个子节点和最后一个子节点也存在关系 firstChild lastChild 即存在这种关系 (someNode.childNodes[0]===someNode.firstChild) (someNode..childNodes[childNodes.length-1]===someNode.lastChild) 操作节点 最经常使用的方法是appendChilde();//用于向childNodesd的末尾加入一个节点 var returnNode=somenNode.appendChild(newNode); alert(returnNode==newNode);//true alert(someNode.lastChild==newNode);//true 使用insertBefore()方法将节点附加到ChildNodes的任何位置 var returnNode=someNode.appendChild(newNode,null); alert(returnNode==someNode.lastNode);//true //插入后成为一个子节点 var returnNode=someNode.appendChild(newNode,someNode.firstNode); alert(returnNode===newNode); alert(returnNode===someNode.firstNode); //插入后成为最后一个节点的前一个节点 var returnNode=someNode.appendChild(newNode,someNode.lastNode); alert(returnNode===someNode.childNodes.length-2);//true alert(returnNode===newNode);//true //注意:appendChild()和insertBefore不会删除节点 //replaceChild()方法接受两个參数,要插入的节点和要替换的节点,要替换的节点将由这种方法返回并从文档树中删除 //替换第一个子节点 var retuenNode=someNode.replaceChild(newNode,someNode.firstChild); //替换最后一个子节点 var returnNode=somNode.replaceChild(newNode,someNode.lastChild); //使用removeChild()方法删除一个子节点 var formerFirstNode=someNode.removeChild(someNode.firstNode); //删除最后一个子节点 var lastNode=someNode.removeChild(someNode.lastNode); //parentNode属性 。。。
全栈程序员站长
2022/07/06
2240
Javascript DOM操作实例
      最近在学DOM,但是还是没有办法很好的记住API,想找些例子来练习,网上的例子将一个个DOM对象方法挨个举例,并没有集合在一起用,效果不尽人意。所以自己写一份实例,顺便巩固下学到的知识。       这个例子很简单,主要就是操作ul下面的li,但是会贯穿很多DOM的对象方法。       首先在body下面创建一个ul,注意<ul></ul> 之间不要有空格或回车,否则会造成文本节点。 ``` <body> <ul id="fruit"></ul> </body> ```   接下来
用户1624346
2018/04/10
9440
Javascript DOM操作实例
JavaScript--XML DOM 总结
Mozilla 开发者社区(MDN):https://developer.mozilla.org/zh-CN/JavaScript MDN文档https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
思索
2024/08/16
850
JavaScript-Dom
JavaScript-Dom 简介 DOM:Document Object Model 节点 HTML 文档中的所有内容都是节点 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 document对象 常用属性 名称 说 明 referrer 返回载入当前文档的**URL** URL 返回当前文档的**URL** document.referrer document.URL ​ document常用方法 名称 说 明
xiaozhangStu
2023/05/04
4640
JavaScript快速查找节点
根据提供的文章内容,撰写摘要总结。
okaychen
2018/01/05
2.2K0
JavaScript快速查找节点
JavaScript(十)
DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API。DOM 描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。
1ess
2021/11/01
7170
关于DOM的理解
当创建了一个网页并把它加载到web浏览器中时,DOM就悄然而生。浏览器根据网页文档创建一个文档对象。
Tz一号
2020/09/10
9990
回到基础:什么是DOM及DOM操作?
文本主要介绍文档对象模型(DOM),了解什么是DOM操作,以及如何使用砶 DOM API 与 JS 中的 Web 页面进行交互。
前端小智@大迁世界
2022/06/15
9880
HTML DOM(二):节点的增删改查
       上一篇:HTML DOM(一)        上一篇讲述了DOM的基本知识,从其得知,在DOM眼中,HTML的每个成分都可以看作是节点(文档节点、元素节点、文本节点、属性节点、注释节点,
高爽
2017/12/28
1.6K0
JavaScript DOM(二)
通过上文可知获取元素可以来利用 DOM 提供的方法来获取元素,如 getElementById、querySelector 等方法,但是也可以利用节点关系来获取元素
赤蓝紫
2023/01/01
6510
JavaScript DOM(二)
前端学习(47)~DOM简介和DOM操作
DOM:Document Object Model,文档对象模型。DOM 为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
Vincent-yuan
2020/03/19
1.9K0
【Java 进阶篇】深入理解 JavaScript DOM Node 对象
在前端开发中,与HTML文档进行交互是一项基本任务。文档对象模型(Document Object Model,简称DOM)为开发者提供了一种以编程方式访问和操作HTML文档的方式。DOM的核心是节点(Node)对象,它代表了文档中的各个部分。本博客将深入探讨JavaScript DOM Node对象,帮助您更好地理解它的作用和如何使用。
繁依Fanyi
2023/10/19
3440
javascript入门笔记9-认识DOM
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。 将HTML代码
方志朋
2017/12/29
1.3K0
javascript入门笔记9-认识DOM
DOM 节点遍历:掌握遍历 XML文档结构和内容的技巧
XML 经常包含节点之间的换行符或空格字符。当文档由简单编辑器(如记事本)编辑时,通常会出现这种情况。
小万哥
2024/03/31
2420
DOM 节点遍历:掌握遍历 XML文档结构和内容的技巧
javascript核心之DOM操作
DOM全称为Document Object Model ,即文档对象模型,是针对HTML和XML的一个API, 描绘了一个层次化的节点树,可以添加、移除和修改页面的某一部分。
用户4831957
2019/09/09
1K0
JavaScript学习(三)
JavaScript中的所有事物都是对象,如:字符串、数值、数值、函数等,每个对象带有属性和方法。
Cloud-Cloudys
2020/07/07
1.3K0
相关推荐
DOM(文档对象模型)基础加强
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档