从零开始学 Web 之 DOM（四）节点
大家好，这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号，欢迎大家订阅关注。在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
一、节点
1、节点的概念
页面中的所有内容，包括标签，属性，文本（文字，空格，回车，换行等），也就是说页面的所有内容都可以叫做节点。
2、节点相关的属性
2.1、节点分类
标签节点：比如 div 标签，p 标签等。
属性节点：比如 class，value 等。
文本节点：比如闭合标签中的文本内容。
2.2、节点属性
nodeType：节点的类型，它的值有 1,2,3 三种。
标签节点：值为 1
属性节点：值为 2
文本节点：值为 3
nodeName：节点的名字
标签节点：大写的标签名字
属性节点：小写的属性名字
文本节点：#text
nodeValue：节点的值
标签节点：null
属性节点：属性的值
文本节点：文本内容
3、获取相关节点
3.1、获取父节点和父元素
父节点只能是标签，不能是属性节点和文本节点，所以父节点也是父元素。
<body>
<div id="dv">
<p id="pid"></p>
<span></span>
</div>
<script src="common.js"></script>
<script>
var dvObj = my$("pid");
console.log(dvObj.parentNode);
console.log(dvObj.parentElement);
</script>
</body>
parentNode：获取元素的父节点。
parentElement：获取元素的父元素。
3.2、获取子节点和子元素
<body>
<div id="dv">
<p id="pid">p标签</p>
<span>span标签</span>
<ul>
<li>li标签</li>
<li>li标签</li>
<li>li标签</li>
<li>li标签</li>
<li>li标签</li>
</ul>
</div>
<script src="common.js"></script>
<script>
var dvObj = my$("dv");
// 获取子节点
console.log(dvObj.childNodes); // 7个
// 获取子元素
console.log(dvObj.children); // 3个
</script>
</body>
childNodes：获取所有子节点（包括标签，属性，节点）
children：获取所有子元素（仅包括标签）
3.3、通过属性的名字获取属性节点
<body>
<div id="dv">
<p id="pid">p标签</p>
<span>span标签</span>
<ul>
<li>li标签</li>
<li>li标签</li>
<li>li标签</li>
<li>li标签</li>
<li>li标签</li>
</ul>
</div>
<script src="common.js"></script>
<script>
var dvObj = my$("dv");
console.log(dvObj.getAttributeNode("id")); // id="dv"
</script>
</body>
getAttributeNode：可以获取属性节点。
3.4、获取节点和元素的12行代码
<body>
<div id="dv">
<p id="pid">p标签</p>
<span>span标签</span>
<ul id="uu">海
<li>li标签</li>内
<li>li标签</li>存
<li id="three">li标签</li>知己
<li>li标签</li>天涯
<li>li标签</li>若比邻
</ul>
</div>
<script src="common.js"></script>
<script>
var ulObj = my$("uu");
// 父节点
console.log(ulObj.parentNode);
// 父元素
console.log(ulObj.parentElement);
// 子节点
console.log(ulObj.childNodes);
// 子元素
console.log(ulObj.children);
// ------------------------------------------------
// 第一个子节点
console.log(ulObj.firstChild);
// 第一个子元素
console.log(ulObj.firstElementChild);
// 最后一个子节点
console.log(ulObj.lastChild);
// 最后一个子元素
console.log(ulObj.lastElementChild);
// 某个元素的前一个兄弟节点
console.log(my$("three").previousSibling);
// 某个元素的前一个兄弟元素
console.log(my$("three").previousElementSibling);
// 某个元素的后一个兄弟节点
console.log(my$("three").nextSibling);
// 某个元素的后一个星弟元素
console.log(my$("three").nextElementSibling);
</script>
</body>
1、以上前四个，chrome, firefox, IE8 都支持
2、后面八个，chrome，firefox支持，IE8下，所有获取节点的操作都获取的是元素，所有获取元素的操作都是 undefined。
3.5、总结
- 获取父子节点和元素的操作，chrome, firefox, IE8 都支持；
- 获取特殊子节点或者子元素和兄弟节点和元素操作，IE8 中所有的节点操作都是元素操作，所有的元素操作都是 undefined。
4、通过节点操作元素
通过节点操作元素的背景颜色
// 通过节点设置p标签的背景颜色为蓝色
<body>
<input type="button" value="变色" id="btn">
<div id="dv">
<p>p标签</p>
<span>span标签</span>
<p>p标签</p>
<span>span标签</span>
<p>p标签</p>
</div>
<script src="common.js"></script>
<script>
my$("btn").onclick = function () {
var dvObj = my$("dv");
var nodes = dvObj.childNodes;
for(var i=0; i<nodes.length; i++) {
if((nodes[i].nodeType === 1) && (nodes[i].nodeName === "P")) {
nodes[i].style.backgroundColor = "blue";
}
}
};
</script>
</body>
通过节点属性来区分节点和元素。
5、封装节点兼容代码
<body>
<input type="button" value="变色" id="btn">
<ul id="uu">
<li>复仇者联盟1</li>
<li>复仇者联盟2</li>
<li>复仇者联盟3</li>
<li id="ii">复仇者联盟4</li>
<li>复仇者联盟5</li>
<li>复仇者联盟6</li>
<li>复仇者联盟7</li>
<li>复仇者联盟8</li>
</ul>
<script src="common.js"></script>
<script>
// 获取任意一个父元素的第一个子元素
function getFirstElement(element) {
if(element.firstElementChild) {
return element.firstElementChild;
} else { // 主要考虑到多个文本节点的影响
var node = element.firstChild;
while((node) && (node.nodeType !== 1)) {
node = node.nextSibling;
}
return node;
}
}
// 获取任意一个父元素的最后一个子元素
function getLastElement(element) {
if(element.lastElementChild) {
return element.lastElementChild;
} else { // 主要考虑到多个文本节点的影响
var node = element.lastChild;
while((node) && (node.nodeType !== 1)) {
node = node.previousSibling;
}
return node;
}
}
// 获取任意一个元素的前一个兄弟元素
function getPreviousElement(element) {
if(element.previousElementSibling) {
return element.previousElementSibling;
} else { // 主要考虑到多个文本节点的影响
var node = element.previousSibling;
while((node) && (node.nodeType !== 1)) {
node = node.previousSibling;
}
return node;
}
}
// 获取任意一个元素的后一个兄弟元素
function getNextElement(element) {
if(element.nextElementSibling) {
return element.nextElementSibling;
} else { // 主要考虑到多个文本节点的影响
var node = element.nextSibling;
while((node) && (node.nodeType !== 1)) {
node = node.nextSibling;
}
return node;
}
}
// 测试
console.log(getFirstElement(my$("uu")).innerText);
console.log(getLastElement(my$("uu")).innerText);
console.log(getPreviousElement(my$("ii")).innerText);
console.log(getNextElement(my$("ii")).innerText);
</script>
</body>
主要是兼容chrome 和 IE8 之间的差异，其次以获取任意一个父元素的第一个子元素为例，之所以不在 else 里面直接使用
return element.firstChild;主要考虑到标签之间可能有多个文本节点的影响。
从零开始学 Web 之 DOM（四）节点的更多相关文章
- 从零开始学 Web 之 DOM（一）DOM的概念，对标签操作
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 DOM（二）对样式的操作，获取元素的方式
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 DOM（三）innerText与innerHTML、自定义属性
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 从零开始学 Web 之 DOM（五）元素的创建
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 从零开始学 Web 之 DOM（六）为元素绑定与解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 从零开始学 Web 之 DOM（七）事件冒泡
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...
- 从零开始学 Web 系列教程
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http:/ ...
- 从零开始学 Web 之 ES6（六）ES6基础语法四
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 从零开始学 Web 之 CSS（四）CSS初始化、定位、overflow、标签规范
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
随机推荐
- 安装Ubuntu 18.04后的一些操作
安装Ubuntu 18.04后的一些操作 1.设置root密码 sudo passwd 2.登陆root(输入密码后看到井号就是切换成为root账户) su 3.删除预装 apt-get remove ...
- git创建新的分支
1.本地创建一个新的分支 git branch develop 2.切换到新创建的分支 git checkout develop 3.将新的分支发布到gitlab上 git push origin d ...
- CSS 样式中的两个方法
在很多时候,我们需要LI开头空一点距离.结尾不能再有下划线了.这个效果在以前是很难实现的.但是有了下面两个选择器,非常容易做出这种东西. .slideTxtBox .bd ul > :first ...
- 学习Hibernate的体会
这个学期老师让我们做一个系统(服务器和客户端),语言自选,我也随大家开始学习java web 和android . 下面是我自学的一些体会和遇到的问题. 关于jar包. jsds.jar javasi ...
- AI制作icon标准参考线与多面板复制
新建10个25x25像素,色值为RGB的画板 在视图中打开显示网格 打开首选项参考线和网格,间隔和隔线都设为1 新建一个20x20像素前景色为空描边为1像素的正方形 选择对齐选项中的对齐画板,使之与画 ...
- 团队-爬取豆瓣电影TOP250-代码设计规范
队长博客:http://www.cnblogs.com/gengwenhao/
- 去掉手机端延迟300ms
手机端300ms延迟是由于在手机上可以双击可以放大缩小造成的,当初ios苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题.这就是手机端300ms延迟的由来. 解决:我是用 ...
- tensorflow学习之（一）预测一条直线y = 0.1x + 0.3
#预测一条y = 0.1x + 0.3的直线 import tensorflow as tf import numpy as np #科学计算模块 ''' tf.random_normal([784, ...
- 利用 Python 练习数据挖掘
本文由 伯乐在线 - 顾星竹 翻译,Namco 校稿.未经许可,禁止转载!英文出处:Giuseppe Vettigli.欢迎加入翻译组. 覆盖使用Python进行数据挖掘查找和描述数据结构模式的实践工 ...
- drf7 分页组件
DRF的分页 数据库有几千万条数据,这些数据需要展示,不可能直接从数据库把数据全部读取出来, 这样会给内存造成特别大的压力,有可能还会内存溢出,所以希望一点一点的取,那展示的时候也是一样的,总是要进行 ...