js Dom详解

最新推荐文章于 2022-06-10 09:37:42 发布
最新推荐文章于 2022-06-10 09:37:42 发布
阅读量77 收藏
点赞数
分类专栏： js 文章标签： IE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kouyandong/article/details/83402475
版权 
Node往往被翻译为节点，在一个对象（可以简单的理解为是HTML页面中），一个属性name="aaa"可以是一个节点，一个< div id="aaa">……< /div>也可以是一个节点，在< body>……< /body>中的，也是一个大大的节点。下面是一些有关Node的属性和方法，并没有包含部分不兼容IE和FF内容的讲解。

Node的属性介绍：

nodeType：显示节点的类型

nodeName：显示节点的名称

nodeValue：显示节点的值

attributes：获取一个属性节点

firstChild：表示某一节点的第一个节点

lastChild：表示某一节点的最后一个子节点

childNodes：表示所在节点的所有子节点

parentNode：表示所在节点的父节点

nextSibling：紧挨着当前节点的下一个节点

previousSibling：紧挨着当前节点的上一个节点

ownerDocument：（不知）

Node有各种各样的节点，我们先花一些时间认识他们，同时一并了解nodeType，nodeName和nodeValue属性：

名称：元素节点

nodeType：ELEMENT_NODE

nodeType值：1

nodeName：元素标记名

nodeValue：null

<body>

<div id = "t" ><span></span></div>

</body>

<script>

var d = document.getElementById("t");

document.write(d.nodeType);

document.write(d.nodeName);

document.write(d.nodeValue);

//显示 1 DIV null

</script>

名称：属性节点

nodeType：ATTRIBUTE_NODE

nodeType值：2

nodeName：属性名

nodeValue：属性值

<body>

<div id = "t" name="aaa"><span></span></div>

</body>

<script>

var d = document.getElementById("t").getAttributeNode("name");

document.write(d.nodeType);

document.write(d.nodeName);

document.write(d.nodeValue);

//显示 2 name aaa

</script>

名称：文本节点

nodeType：TEXT_NODE

nodeType值：3

nodeName：#text

nodeValue：文本内容

<body>

<div id = "t">bbb</div>

</body>

<script>

var d = document.getElementById("t").firstChild;

document.write(d.nodeType);

document.write(d.nodeName);

document.write(d.nodeValue);

//显示 3 #text bbb

</script>

名称：CDATA文本节点（XML中传递文本的格式）

nodeType：CDATA_SECTION_NODE

nodeType值：4

nodeName：#cdata-section

nodeValue：CDATA文本内容

（作者省略8个属性，需技术补充）

attributes属性，直接获取一个属性节点，注意这里要使用[]，保持IE和FF的兼容性。

<body name="ddd">

<div id = "t" name = "aaa"><span>aaa</span><span>bbb</span><span>ccc</span></div>

</body>

<script>

var d = document.getElementById("t").attributes["name"];

document.write(d.name);

document.write(d.value);

//显示 name aaa

</script>

firstChild和lastChild属性，表示某一节点的第一个和最后一个子节点：

<body>

<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>

</body>

<script>

var d = document.getElementById("t");

document.write(d.firstChild.innerHTML);

document.write(d.lastChild.innerHTML);

//显示 aaa ccc

</script>

childNodes和parentNode属性，表示所在节点的所有子节点和所在节点的父节点，这里的childNodes注意是一个数组：

<body name="ddd">

<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>

</body>

<script>

var d = document.getElementById("t");

document.write(d.childNodes[1].innerHTML);

document.write(d.parentNode.getAttribute("name"));

//显示 bbb ddd

</script>

nextSibling和previousSibling属性，分别表示在parentNode的childNodes[]数组中，紧挨着当前节点的上一个和下一个节点：

<body name="ddd">

<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>

</body>

<script>

var d = document.getElementById("t").childNodes[1];

document.write(d.nextSibling.innerHTML);

document.write(d.previousSibling.innerHTML);

//显示 ccc aaa

</script>

ownerDocument属性（不知如何使用）

Node的方法介绍：

hasChildNodes()：判定一个节点是否有子节点

removeChild()：去除一个节点

appendChild()：添加一个节点

replaceChild()：替换一个节点

insertBefore()：指定节点位置插入一个节点

cloneNode()：复制一个节点

normalize()：（不知）

hasChildNodes()方法：判定一个节点是否有子节点，有返回true，没有返回false

<body name="ddd">

<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>

<div id = "m"></div>

</body>

<script>

alert(document.getElementById("t").hasChildNodes());

alert(document.getElementById("m").hasChildNodes());

// 第一个true，第二个false

</script>

removeChild()方法：去除一个节点

<body name="ddd">

<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>

</body>

<script>

var d = document.getElementById("t").firstChild;

document.getElementById("t").removeChild(d);

// <span>aaa</span>被去除

</script>

appendChild()方法：添加一个节点，如果文档树中已经存在该节点，则将它删除，然后在新位置插入。

<body name="ddd">

<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>

</body>

<script>

var d = document.getElementById("t").firstChild;

document.getElementById("t").appendChild(d);

// <span>aaa</span>成了最后一个节点

</script>

replaceChild()方法：从文档树中删除（并返回）指定的子节点，用另一个节点来替换它。

<body name="ddd">

<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>

</body>

<script>

var newd = document.createElement("span");

newd.innerHTML = "eee";

var oldd = document.getElementById("t").lastChild;

document.getElementById("t").replaceChild(newd,oldd);

// 最后一项成了 eee

</script>

insertBefore()方法：在指定节点的前面插入一个节点，如果已经存在，则删除原来的，然后在新位置插入

<body name="ddd">

<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div>

</body>

<script>

var newd = document.createElement("span");

newd.innerHTML = "eee";

var where = document.getElementById("t").lastChild;

document.getElementById("t").insertBefore(newd,where);

// 在最后一项的前面多了一项 eee

</script>

cloneNode()方法：复制一个节点，该方法有一个参数，true表示同时复制所有的子节点，false表示近复制当前节点

<body name="ddd">

<div id = "t"><span>aaa</span><span>bbb</span><span>ccc</span></div><div id = "m"></div>

</body>

<script>

var what = document.getElementById("t").cloneNode(false).innerHTML;

document.getElementById("m").innerHTML = what;

// 增加了一个aaabbbccc

</script>
kouyandong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js获取元素下的第一级子元素的方法(推荐)
12-01
js childnodes获取的是所有的子元素，而我们实际要获取第一级子元素。 function getChildren(obj){ var objChild = [] ; var objs = obj.getElementsByTagName('*'); for(var i=0,j=objs.length; i<j;++i){ if(objs[i].nodeType != 1){alert(objs[i].nodeType); continue ; } var temp = objs[i][removed]; if(temp.no
JavaScript中的Node相关内容介绍
天涯 书塾
03-23 736
Node往往被翻译为节点，在一个对象（可以简单的理解为是HTML页面中），一个属性name="aaa"可以是一个节点，一个……也可以是一个节点，在……中的，也是一个大大的节点。下面是一些有关Node的属性和方法，并没有包含部分不兼容IE和FF内容的讲解。Node的属性介绍：nodeType：显示节点的类型nodeName：显示节点的名称nodeValue：显示节点的值attribute
【JavaScript 教程】DOM——Node 接口
油墨香^-^的博客
06-10 515
作者 | 阮一峰 所有 DOM 节点对象都继承了 Node 接口，拥有一些共同的属性和方法。这是 DOM 操作的基础。 1、属性 1.1、Node.prototype.nodeType nodeType属性返回一个整数值，表示节点的类型。 document.nodeType // 9 上面代码中，文档节点的类型值为9。 Node 对象定义了几个常量，对应这些类型值。 document.nodeType === Node.DOCUMENT_NODE // true 上面代码中
【红宝书笔记精简版】第十四章DOM
weixin_41950078的博客
02-13 636
目录 14.1 节点层级 14.1.2 Document 类型 14.1.3 Element 类型 14.1.4 Text 类型 14.1.5 Comment 类型 14.1.6 CDATASection 类型 14.1.7 DocumentType 类型 14.1.8 DocumentFragment 类型 14.1.9 Attr 类型 14.2 DOM 编程 14.2.1 动态脚本 14.2.2 动态样式 14.2.3 操作表格 14.2.4 使用 NodeList 14.
原生前端之nodetext操作
jifukui的专栏
12-30 563
JavaScript与HTML交互最主要的是使用DOM进行控制HTML的文档信息。对于具有全标签结构的HTML元素可以分为属性和文本两部分，下面我们将对文本这一部分进行详细的讲解。话先不多说先举个栗子压压惊。 <!DOCTYPE html> <html> <head> <title>text的使用</title&gt...
JavaScript中DOM详解
10-24
主要介绍了jQuery 中DOM 操作详解,以及在火狐和IE之间的13点JavaScript差异，需要的朋友可以参考下
javascript dom 操作详解 js加强
10-29
javascript dom 操作详解 js加强操作实现代码。
javascriptDOM详解
07-21
阿里巴巴的javascript培训PPT，介绍的比较详细
js常用DOM方法详解
10-20
本文主要介绍了js常用的DOM方法，具有很好的参考价值，下面跟着小编一起来看下吧
Node节点
二熊不是熊二的博客
09-19 953
节点属性 1、nodeType：节点类型 Node.ELEMENT_NODE(1)；（元素节点） Node.ATTRIBUTE_NODE(2)；（属性节点） Node.TEXT_NODE(3)；（文本节点） Node.CDATA_SECTION_NODE(4)； Node.ENTITY_REFERENCE_NODE(5)； Node.ENTITY_NODE(6)； Node.PROCESSING...
node的里html中写script报错,Node 中脚本遭遇异常时如何安全退出
weixin_39613561的博客
06-07 239
本文收录于 GitHub 山月行博客: shfshanyue/blog，内含我在实际工作中碰到的问题、关于业务的思考及在全栈方向上的学习前端工程化系列Node进阶系列一个 Node 相关的项目中，总是少不了跑脚本。跑一个脚本拉取配置、处理一些数据以及定时任务更是家常便饭。在一些重要流程中能够看到脚本的身影：CI，用以测试、质量保障及部署等Docker，用以构建镜像Cron，用以定时任务如果在这些重...
nodejs入门秘籍
景姑娘的肥猫
08-26 1531
node简单入门
Node.js基础
就是有点怕怕的博客
02-09 116
1.Node的定义 Node 是一个基于 chrome v8 引擎的 JavaScript 代码运行环境，其组成是 ECMAScript 和 Node 环境提供的一些API，主要包括文件、路径和网络等强大的API。（浏览器能够运行javascript代码，因而浏览器也是javascript代码运行环境） 2.Node基础语法 在Node的环境中所有的ECMAScript语法都可以运行。 而在Nod...
数据结构--知识点16--搜索算法(二叉树)
ANingL的博客
09-06 2838
文章目录一、树的概念1、特点2、树的术语3、树的种类4、树的存储与表示5、常见的树的应用场景二、二叉树1、概念2、性质 一、树的概念 树是一种抽象数据类型(ADT)或是视作这种抽象数据类型的数据结构 1、特点 每个节点有零个或多个子节点 没有父节点的节点称为根节点 每一个非根节点有且只有一个父节点 除了根节点外，每个子节点可以分为**多个不相交(因为都只有一个父节点)**的子树 2、树的术语 节点的度：一个节点含有的子树的个数称为该节点的度 树的度：一棵树中，最大的节点的度称为树的度 叶节点或终端节点
JavaScript基础知识（二）
LYQ
10-19 1267
DOM1．文本对象模型)：文档 –html文档 或xml文档：对象 –document对象的属性和方法：模型DOM是针对xml(html)的基于树的API。DOM树:节点（node）的层次。DOM把一个文档表示为一棵家谱树（父，子，兄弟）DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面．节点（node）：来源于网络理论，代表网络中的一个连接点。网络是由节点构成的集合。
js nodeType
齐枫的博客
01-24 3447
js nodeType nodeType 属性可用来区分不同类型的节点，比如 元素, 文本 和 注释。 节点类型常量 常量 值 描述 Node.ELEMENT_NODE 1 一个 元素 节点，例如 &lt;p&gt; 和 &lt;div&gt;。 Node.TEXT_NODE 3 Element 或者 Attr 中实际的 文字 Node.PROCESSING_INST...
Javascript高级编程学习笔记（35）—— DOM（1）节点
dazhongshuo1167的博客
01-07 112
DOM JS由三部分组成 1、BOM 2、DOM 3、ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM（文档对象模型） 我们知道，JS中的这三个部分实际上就是三种规范，只要是实现了这三种规范，那么这个语言就可以说是JS DOM（文档对象模型）也是一种规范，是针对HTML和XML文档的API（应用程序编程接口） DOM的...
节点node接口的属性与方法
qq_39342118的博客
01-12 458
1.DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。 2.节点的类型有七种。浏览器提供一个原生的节点对象Node，这七种节点都继承了Node，因此具有一些共同的属性和方法。 Document：整个文档树的顶层节点 DocumentType：doctype标签（比如<!DOCTYPE html>） Element：网页的各种HTML标签（比如<body>、<a>等） Attr：网页元素的属性（比如class=
javascript当中如何操纵Node，（创建，附加，克隆，取代，去除，插入Node）
mark_to_win的专栏
03-21 246
1.操纵Node，（创建，附加，克隆，取代，去除，插入Node）例 1.1（cloneNode()IEFF.html）<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><SCRIPT LANGUAGE="JavaScript"><!--window...
js获取dom元素内容高度
最新发布
09-01
- *2* [JS中获取 DOM 元素的绝对位置实例详解](https://download.csdn.net/download/weixin_38700790/13620403)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值