博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Javascript之DOM的三大节点及部分用法
阅读量:4647 次
发布时间:2019-06-09

本文共 1729 字,大约阅读时间需要 5 分钟。

DOM有三种节点:元素节点、属性节点、文本节点。

 

一、用nodeType可以检测节点的类型

节点类型 nodeType属性值
元素节点 1
属性节点 2
文本节点 3

 

 

 

 

 

 

 

这样方便在js中对各个节点进行操作。

 

元素节点:html中的标签。

属性节点:html便签中的属性值。

文本节点:元素节点之间的文本。

 

二、用body的childNodes来测试

1  /*第一个文本元素2    */
/*第二个文本元素3 */
/*第三个文本元素4 */
    5
  • 6
  • 7
  • 8
/*第四个文本元素9 */

 

来看body的childNodes中各个节点的个数。

先说一下childNodes,这个属性用来获取任何一个元素的所有子元素,它是一个包含这个元素的全部子元素的数组。

用js测试:

1 window.onload = function (){2     var oBody = document.getElementsByTagName('body')[0];3     var aChild = oBody.childNodes;4     alert(aChild.length);//75     for(var i = 0; i < aChild.length; i++) {6         alert(aChild[i].nodeType);//3 1 3 1 3 1 37         }8 };

由此看来:

body的子元素有div、div、ul。

body的文本元素有四个,代码中注释出出来的,我故意将*/换了一行写出来,是想表明在<body>和<div>之间是一个文本节点。

 

有人会觉得疑惑,不是说元素节点之间就是文本节点吗?为什么像<div></div>之间的文本节点没有算进去呢?

对的,那个也算文本节点,但我们计算的是body的子节点,像<div></div>之间的那是<div>的子节点啦,并不是body的子节点。

 

三、用nodeValue来得到和设置一个节点的值

三大节点中,属性节点和文本节点都是可能有值的,但是元素节点是没有值的。

用node.nodeValue得到node的值,那么有一个问题,nodeValue和innerHTML有什么区别呢?

nodeValue获取的是节点的值,innerHTML是以字符串形式返回该节点的所有子节点及其值。可以看做是部分与大体的一个区别。

举个例子:

1 2     
3 这是div的第一个子节点,是一个文本节点4

div的第二个子节点p,这是p的第一个文本节点

5
6

我们用js来测试一下nodeValue和innerHTML的结果

1 window.onload = function (){2     var oDiv = document.getElementById('div1');3     var aChild = oDiv.childNodes;4             5     alert(aChild[0].nodeValue);6     alert(oDiv.innerHTML);7 };

测试结果如下:

第一个alert弹出“这是div的第一个子节点,是一个文本节点”

第二个alert弹出“这是div的第一个子节点,是一个文本节点 <p>div的第二个子节点p,这是p的第一个文本节点</p>”

 

三、用nodeName来获取节点的

nodeName属性含有某个节点的名称。

对于元素节点,nodeName=标签名(返回的名称是大写的)。

对于文本节点,nodeName=#text。

对于属性节点,nodeName=属性名(返回的名称是大写的)。

使用方法:elemt.nodeName;

 

转载于:https://www.cnblogs.com/wind-lanyan/p/5718245.html

你可能感兴趣的文章
ubuntu下搭建cocos2dx编程环境-上
查看>>
Thread 多线程
查看>>
python wmi模块 获取windows内部信息
查看>>
python 并发编程 多线程 Thread对象的其他属性或方法
查看>>
Linux cloc
查看>>
234. 回文链表
查看>>
Dynamics CRM 开发模板使用手册(插件开发)
查看>>
CentOS下phpMyAdmin安装
查看>>
C# 设置程序不要发送错误报告
查看>>
将json数据格式化展示在页面上
查看>>
mysql-5.6.17-win32免安装版配置
查看>>
Linux下的C语言读写练习(一)(读取键盘输入输出通过文件的方式)
查看>>
.NET 黑魔法 - asp.net core 身份认证 - Policy
查看>>
Linux 设置IP地址,并能连接外网
查看>>
VB6之扫雷克星
查看>>
PAT自测-5 Shuffling Machine
查看>>
SGU 326 Perspective ★(网络流经典构图の竞赛问题)
查看>>
欧拉回路(附模板)
查看>>
4月18日学习日志
查看>>
小知识点:自由变换工具
查看>>