技术标签: html语言节点树
一、介绍
这节课呢,我们来了解的是JavaScript 遍历HTML节点树,
在Dom文档查的结构中,实际上各级标签呈现树状排列。我们可以把整个html文档看成一个树形,可以通过遍历节点树的形式进行标签的选取。
Dom文档中,遍历节点的节点有,文本节点,注释节点和标签节点。
二、知识点介绍
1、节点类型
2、遍历节点树
3、基于元素节点数的遍历
4、parentElement ——> 返回当前元素的父元素节点(IE不兼容)
5、节点的一个方法
6、使用DOM方法递归遍历节点树——>小案例
三、上课对应视频的说明文档
1、节点类型
所以一般我们获取节点类型用 nodeType
2、遍历节点树
这种遍历可以遍历 文本类节点、注释节点、元素节点等。 任何浏览器都好使。
2.1、parentNodes ——>父节点(最顶端的parentNode为#document);
var strong = document.getElementsByTagName('strong')[0];
console.log(strong.parentNode);
//strong.parentNodes ————div
//strong.parentNode.parentNode ————body
//strong.parentNode.parentNode.parentNode ————html
//strong.parentNode.parentNode.parentNode .parentNode————document
2.2、childNodes ——> 子节点们
var div = document.getElementsByTagName('div')[0];
console.log(div.childNodes);
2.3、firstChild ——>第一个子节点
var div = document.getElementsByTagName('div')[0];
console.log(div.firstChild);
2.4、lastChild ——> 最后一个子节点
var div = document.getElementsByTagName('div')[0];
console.log(div.lastChild);
2.5、nextSibling ————>后一个兄弟节点
var strong = document.getElementsByTagName('strong')[0];
console.log(strong.nextSibling);
3、基于元素节点数的遍历
遍历元素节点。
除了children以外,其他遍历ie9以下不兼容
3.1、parentElement ——> 返回当前元素的父元素节点(IE不兼容)
var strong = document.getElementsByTagName('strong')[0];
console.log(strong.parentElement);
3.2、children ——> 只返回当前元素的元素子节点
var div = document.getElementsByTagName('div')[0];
console.log(div.children);
3.3、node.childElementCount === node.children.length 当前元素节点的子元素节点个数(IE不兼容)
var div = document.getElementsByTagName('div')[0];
console.log(div.children.length);
3.4、firstElementChild ——> 返回的是第一个节点(IE不兼容)
var div = document.getElementsByTagName('div')[0];
console.log(div.firstElementChild);
3.5、lastELementChild ————>返回的是最后一个元素节点(IE不兼容)
var div = document.getElementsByTagName('div')[0];
console.log(div.lastElementChild);
3.6、nextElementSibling / previousElementSibling ——> 返回后一个/前一个兄弟元素节点(IE不兼容)
var strong = document.getElementsByTagName('strong')[0];
console.log(strong.nextElementSibling);
console.log(strong.previousElementSibling);
4、节点的四个属性
4.1、nodeName
元素的标签名,返回字符串,以大写的形式表示,只读
var strong = document.getElementsByTagName('strong')[0];
console.log(typeof(strong.nodeName) + strong.nodeName);
4.2、nodeValue
text节点或Comment节点的文本内容,可读写
4.3、nodeType
该节点类型,只读 (返回以上节点类型后面对应的值)
var strong = document.getElementsByTagName('strong')[0];
console.log(strong.nodeType);
对应最上面表格 为元素节点
4.4、Attributes
Element节点的属性集合 ,属性值可以改,但属性名不可以改
attributes:获取一个属性作为对象
getAttribute:获取某一个属性的值
setAttribute:建立一个属性,并同时给属性捆绑一个值
createAttribute:仅建立一个属性
removeAttribute:删除一个属性
getAttributeNode:获取一个节点作为对象
setAttributeNode:建立一个节点
removeAttributeNode:删除一个节点
attributes可以获取一个对象中的一个属性,并且作为对象来调用,注意在这里要使用“[]”,IE在这里可以使用“()”,考虑到兼容性的问题,要使用“[]”。关于attributes属性的使用方式上,IE和FF有巨大的分歧,在此不多介绍。
4.4.1、attributes的使用方法:(IE和FF通用)
var d = document.getElementById("sss").attributes["value"];
document.write(d.name);
document.write(d.value);
//显示value aaa
getAttribute,setAttribute,createAttribute,removeAttribute四兄弟的概念比较容易理解,使用方法也比较简单,唯一需要注意这几点:
1、createAttribute在使用的时候不需要基于对象的,document.createAttribute()就可以。
2、setAttribute,createAttribute在使用的时候不要使用name,type,value等单词,IE和FF的反应都奇怪的难以理解。
3、createAttribute在使用的时候如果只定义了名字,没有d.nodeValue = "hello";语句定义值,FF会认为是一个空字符串,IE认为是undefined,注意到这点就可以了。
4.4.2、getAttribute的使用方法:
var d = document.getElementById("sss").getAttribute("value");
document.write(d);
//显示 aaa
4.4.3、setAttribute的使用方法:(你会发现多了一个名为good的属性hello)
var d = document.getElementById("sss").setAttribute("good","hello");
alert(document.getElementById("t").innerHTML)
4.4.4、createAttribute的使用方法:(多了一个名为good的空属性)
window.onload = function (){
var oBox = document.getElementById('box');
alert( document.body.innerHTML );
oBox.setAttribute('value','name');
alert( document.body.innerHTML );
attr = document.createAttribute('hallo');
alert( document.body.innerHTML );/*同上*/
attr.nodeValue = 'world';/*对自定义属性进行编辑*/
alert( document.body.innerHTML );/*同上*/
oBox.setAttributeNode(attr);/*对标签插入自定义属性*/
alert( document.body.innerHTML );/*改变*/
};
4.4.5、removeAttribute的使用方法:(少了一个)
var d = document.getElementById("sss").removeAttribute("value");
alert(document.getElementById("t").innerHTML)
getAttributeNode,setAttributeNode,removeAttributeNode三个方法的特点是都直接操作一个node(节点),removeAttributeNode在一开始的时候总会用错,但是充分理解了node的含义的时候,就能够应用自如了。
4.4.6、getAttributeNode的使用方法:
var d = document.getElementById("sss").getAttributeNode("value");
document.write(d.name);
document.write(d.value);
//显示 value aaa
4.4.7、setAttributeNode的使用方法:
var d = document.createAttribute("good");
document.getElementById("sss").setAttributeNode(d);
alert(document.getElementById("t").innerHTML);
4.4.8、removeAttributeNode的使用方法:
var d = document.getElementById("sss").getAttributeNode("value")
document.getElementById("sss").removeAttributeNode(d);
alert(document.getElementById("t").innerHTML);
5、节点的一个方法
Node.hasChildNodes(); 是否有孩子节点。有:true;没有:false
var div = document.getElementsByTagName('div')[0];
console.log(div.hasChildNodes());
6、使用DOM方法递归遍历节点树——>小案例
需求:完成遍历并且带缩进
这里细节点:定义一个数组存放缩进“Tab”,何时压入一个缩进,何时退出一个缩进?
只要有子节点,加压入一个缩进,只要本级所有子节点输出完,就退一个\t
代码如下:
使用DOM方法递归遍历节点树Hello World !
/*定义一个数组用于存放Tab*/
var arr = [];
function getChildren(parent){
/*如果parent是元素节点,就返回nodeName,否则,返回nodeValue*/
console.log(arr.join("")+"|-"+(parent.nodeType==1?parent.nodeName:parent.nodeValue));
if (parent.childNodes.length){
/*只要有子节点,加压入一个缩进*/
arr.push("\t")
for (var i= 0,len=parent.childNodes.length;i
getChildren(parent.childNodes[i]);
}
/*只要本级所有子节点输出完,就退一个\t*/
arr.pop();
}
}
getChildren(document.body.childNodes[3]);
文章浏览阅读2.3k次,点赞3次,收藏32次。功能测试黑盒测试的方法_软件功能测试
文章浏览阅读7.2k次。读取word模板,并写入数据到word文件中_qt word 模板华报告
文章浏览阅读35次。对面向对象的简单介绍,没啥深入的写
文章浏览阅读659次。转自:https://blog.csdn.net/kangerdong/article/details/82432701把所有的准备工作都做完了以后,可以将加密算法移植到我们具体的项目中去了,在STM32中在出厂前已经将RSA的公钥私钥,CA数字签名和CA公钥烧写在STM32的flash上了。4.1 身份认证在wifi连接上服务器上后,客户端首先发起交换密钥请求,客户端将自己..._stm32实现md5加密
文章浏览阅读2.4k次。SQL语句命令如何查询数据库容量?SQL查询数据库存储空间分为统计所有数据库总容量,和查询单个指定数据库存储大小,数据库吧分享MySQL数据库存储容量大小查询SQL语句:SQL查询所有数据库容量大小查询所有数据库容量大小需要对information_schema进行操作,单位转换为MB,SQL语句如下:mysql> use information_schema;mysql> select concat(round(sum(DATA_LENGTH/1024/1024),2),'MB_data_length/1024/1024单位是啥
文章浏览阅读9.8k次,点赞3次,收藏10次。在程序运行时,当出现错误的输入、数据边界值问题或者程序本身有逻辑问题时,当前运行的程序会中断当前运行任务,提前退出运行状态,无法完成既定的任务。在程序中加入错误检查机制,合理处理程序可能出现的异常和错误,确保程序在所有可能条件下都能可靠运行,是现代编程语言的通用处理方式。在MATLAB中,使用try … catch语句,可以捕获异常并在catch块中处理异常,而不用让程序中断运行,确保程序的可靠性和鲁棒性。try … catch的语法结构如下:try statements %try语句块ca_对于此运算,数组的大小不兼容
文章浏览阅读1.3w次,点赞5次,收藏63次。本篇文章使用SSH,适合新手。第一步:在Linux上查看SSH的工作状态:打开Linux终端,输入systemctl status sshd,如图所示,红色方框里的内容说明你安装了SSH并且正在工作;第二步:查看服务器的IP地址:打开Linux终端,输入ifconfig,如图所示红色方框里的内容,即为IP地址(每一台电脑都不一样);第三步:连通测试:打开Windows系统的黑窗口,按住Windows+R,输入cmd,打开之后直接输入ping+IP地址(为第二步里面的IP地址),显示如图所示_linux远程登录另一台linux
文章浏览阅读168次。xtrabackup 使用说明(续) 背景:      关于物理备份工具xtrabackup的一些说明可以先看之前写过的文章说明:xtrabackup 安装使用。现在xtrabackup版本升级到了2.4.4,相比之前的2.1有了比较大的变化:innobackupex&am_xtrabackup arch
文章浏览阅读2k次。感谢阅读腾讯AI Lab微信号第146篇文章。本文介绍腾讯 AI Lab 入选 ICASSP 2022 的 14 篇论文。ICASSP(International Conference on Acoustics, Speech and Signal Processing)即国际声学、语音与信号处理会议,是IEEE主办的全世界最大的,也是最全面的信号处理及其应用方面的顶..._icassp
文章浏览阅读5.7k次,点赞6次,收藏7次。python调用windows command line时,如果cmd有返回(比如上一篇博客中的报错python调用带空格的windows cmd命令问题),遇到了输出乱码的情况:‘C:/Program’ �����ڲ����ⲿ���Ҳ���ǿ����еij������������ļ���解决方法:在调用cmd命令前先更改一下cmd的编码方式import osFDTDProgramPath = 'C:/Program Files/Lumerical/FDTD/bin/fdtd-solutio_c:\program' is not recognized as an internal or external command, operable
文章浏览阅读775次。前言:这个问题困扰我好长时间,桥接的静态ip我会了,然而用nat 的方式配置集群会更好。(nat 方式客户机之间的通讯不经过路由器),所以想着换成nat方式会更好。要使用nat方式设置静态ip ,需要相当多的计算机网络知识了。第一先查看你的主机的网卡是否把网络共享给虚拟网卡vmnet8 了吗? 打开网络共享中心———>更改适配器设置 看下图 然后右击 你用的那个网卡。我用的无线。所以右击 ..._ubuntu vmplayer centos nat ip
文章浏览阅读1.3k次。众所周知RTX3080显卡已经面世,算是性价比非常高的高端显卡了,可以流畅且高清运行市面上所有的3A大作,当然也会面临性能过剩的情况,但随着游戏的发展与进阶,这点配置在未来是肯定要被淘汰的,所以并不需要过度的吹嘘,如今的GTA5已经不同当年,虽然一台电脑都可以运行这款游戏,想当年还在考虑自己的XP系统是否可以游玩GTA5,现在想起来还觉得回忆满满呢,好在GTA5有很多MOD可以供我们使用,让游戏体..._3080gta5画面设置