详解html结构之间的各个关系,层级关系(以列表为例)

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>层级关系查找元素</title></head><body><div id = "div">hello<ul id = ""><li>li1</li><li>li2</li><li>li3</li><li>li4</li></ul></div><br /><ul id = "ul"><li>li1</li><li>li2</li><li>li3</li><li>li4</li></ul><script type="text/javascript">//父级查找子级 function getElement(){var div = document.getElementById("div");//得到div下面所有节点var elements = div.childNodes;//现在得到ul下面的所有childNodes，就是所有li div有 0,1,2 三个子节点 var lis1 = elements[1].childNodes;for (var i = 0 ; i < lis1.length;i ++){document.write(lis1[i].nodeName + " " + lis1[i].nodeType);}document.write("<hr />");//ul 下的所有元素节点，即四个livar lis2 = elements[1].children;for (var i = 0 ; i < lis2.length;i ++){document.write(lis2[i].nodeName + " " + lis2[i].nodeType + " "+ lis2[i].innerText + "<br />");}}//子级查找父级,父节点function parents(){var div = document.getElementById("div");var p = div.parentNode;//bodyvar pp = p.parentNode;//htmlvar ppp = pp.parentNode;//nodeType 9,nodeName documentvar v = div.parentElement;//父节点名alert(ppp.nodeType + ppp.nodeName + pp.innerHTML)}//创建元素图片function create(){var img = document.createElement("img");img.src = "../b1.gif";document.body.appendChild(img);}//移除元素function del1(){var ul = document.getElementById("ul");var lis = ul.children;ul.removeChild(lis[0]);}</script><button onclick="getElement()">find my son</button><button onclick="parents()">find my father</button><button onclick="create()">create a element</button><button onclick="del1()">del</button></body>
</html>

阴影是div的第一个文本节点，占位nodeType为3

阴影是div的第二个元素节点，占位nodeType为1

阴影是div的第三个文本节点，占位nodeType为1

以上是针对childNodes ，如果是children 就不包含文本节点了。

getElement()的结果

Conclusion:
根节点，父节点，子节点，兄弟节点

nodeType 1 表示（标签）元素节点 ; 2 表示属性节点；3 表示文本节点

firstChild 第一个节点，包括文本节点； lastChild 最后一个节点包含文本节点
firstElementChild 第一个元素节点; lastElementChild 最后一个元素节点是元素！！！！

详解html结构之间的各个关系,层级关系(以列表为例)相关推荐

详解127.0.0.1和localhost的关系和区别
详解127.0.0.1和localhost的关系和区别前情: 周三有同事突然问 127.0.0.1和localhost有什么不同吗,正好利用这个机会整理一下,这个虽然是大家常见的知识点,但是估计很多 ...
JDK中的Timer和TimerTask详解目录结构： Timer和TimerTask 一个Timer调度的例子如何终止Timer线程关于cancle方式终止线程反复执行一个任务 sche
JDK中的Timer和TimerTask详解目录结构: Timer和TimerTask 一个Timer调度的例子如何终止Timer线程关于cancle方式终止线程反复执行一个任务 schedu ...
JVM详解——内存结构
如果有兴趣了解更多相关内容,欢迎来我的个人网站看看:耶瞳空间一:JVM基本介绍 JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,具体实现有很 ...
android 4.2目录结构,关于android的4.2的0文件夹的详解(目录结构挂载分析)
关于android的4.2的0文件夹的详解 ---- android 4.0 ---- 在galaxy nexus(GN)手机上userdata分区很大,被挂在/data目录,用户的数据通常是放在sd ...
python 线程等待_详解python多线程之间的同步(一)
引言: 线程之间经常需要协同工作,通过某种技术,让一个线程访问某些数据时,其它线程不能访问这些数据,直到该线程完成对数据的操作.这些技术包括临界区(Critical Section),互斥量(Mute ...
详解：UML类图符号、各种关系说明以及举例
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 作者 | duanxz 来源 | https://www ...
自定义类型详解：结构体（内存对齐、位段） + 枚举 + 联合
目录一.结构体 1.特殊的声明 2.结构体自引用 3.结构体变量的定义和初始化 4.打印结构体二.==结构体内存对齐== 1.内存对齐结构体嵌套如何求为什么存在内存对齐? 2.修改默认对齐数 ...
C语言结构体详解（结构体定义，使用，结构体大小等）
c语言结构体详解 1.c语言结构体 1.1 结构体基础知识 1.2 结构体声明 1.3 结构体特殊声明 1.4 结构体的自引用 1.5 结构体的大小的计算 1.5.1了解结构体大小计算规则 1.5.2 ...
【04Vue3 目录结构】VUE3目录结构概述结构详解目录结构的作用注意事项
Vue3 目录结构教程目录结构概述在 Vue3 项目中,通常采用以下目录结构组织代码: ├── public│ └── index.html├── src│ ├── assets│ ├── com ...

详解html结构之间的各个关系,层级关系(以列表为例)

详解html结构之间的各个关系,层级关系(以列表为例)相关推荐

最新文章

热门文章