本文介绍了HTML文档中的节点概念，包括文档节点、元素节点、属性节点和文本节点，以及通过nodeType、nodeName和nodeValue获取节点信息。节点间的关系如父子、兄弟关系，并展示了如何通过JavaScript访问和操作这些节点。此外，文章还讨论了BOM（浏览器对象模型），如window对象、location对象、history对象和navigator对象的功能，以及如何使用它们进行页面交互。最后，提到了数组去重的几种方法。
1.节点操作
什么是节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
整个文档是一个文档节点 document
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
节点类型
通过nodeType属性可以获取节点的类型
document的节点类型---9
标签的节点类型---1
属性的节点类型---2，getAttributeNode("属性"):获取元素的属性节点
文本的节点类型---3，元素的第一个子节点就是文本节点
节点名称
通过nodeName可以获取元素的节点名称。
document的节点名称---#document
标签的节点名称---大写的标签名
属性的节点名称---属性名
文本的节点名称---#text
节点值
通过nodeValue可以获取元素的节点的值。
document的节点值---null
标签的节点值---null
属性的节点值---属性值
文本的节点值---文本的内容
2.节点之间的关系
(1)、HTML DOM 节点树
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
节点之间的关系就是嵌套关系（父子关系）、并列关系（兄弟关系）。注意区分节点与元素节点之间的区别。
父节点--parentNode
父元素节点--parentElement
子节点--childNodes：标签节点、文本节点、注释节点 得到的是伪数组
子元素节点--children :标签节点
第一个子节点--firstChild:文本
第一个子元素节点--firstElementChild：第一个标签
最后一个子节点--lastChild:文本
最后一个子元素节点--lastElementChild: 最后一个标签
上一个子节点--previousSibling:文本
上一个子元素节点--previousElementSibling: 上一个标签
下一个子节点 --nextSibling:文本
下一个子元素节点--nextElementSibling: 下一个标签
总结：firstChild、lastChild、previousSibling、nextSibling获取到的都是文本，如果没有就是文本节点名称#text， firstElementChild、lastElementChild、previousElementSibling、nextElementSibling获取到的都是标签，如果没有就是空。
(3)、节点隔行换色
我们之前学过的隔行换色都是通过遍历伪数组然后奇偶数判断，或者循环累加时+2等，现在我是利用节点之间的关系以及节点的名称值等实现隔行换色的效果
第一种：奇偶数判断
for (var i = 0; i < liObj.length; i++) {
if (i % 2 == 0) {
liObj[i].style.backgroundColor = "red";
}
}
第二种：累加2
for (var i = 0; i < liObj.length; i += 2) {
liObj[i].style.backgroundColor = "red";
}
第三种：子元素节点
for (var i = 0; i < ulObj.children.length; i++) {
if (i % 2 == 0) {
liObj[i].style.backgroundColor = "red";
}
}
第四种：节点操作
for (var i = 0; i < ulObj.childNodes.length; i++) {
// console.log(ulObj.childNodes[i]);
// 判断是不是标签节点，把标签节点提取出来即可
if (ulObj.childNodes[i].nodeType == 1 && ulObj.childNodes[i].nodeName == "LI") {
console.log(ulObj.childNodes[i]);
newObj.push(ulObj.childNodes[i]);
}
}
for (var i = 0; i < newObj.length; i++) {
if (i % 2 == 0) {
newObj[i].style.backgroundColor = "red";
}
}
(4)、插入节点
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
提示： 如果你想创建一个新的文本列表项，在 LI 元素后你应该添加元素的文本节点，然后在列表中添加 LI元素。
你也可以使用 insertBefore 方法来 插入/移除 已存在的元素。
node.insertBefore(newnode,existingnode) 参数newnode是要插入的节点对象，existingnode是要添加新的节点前的子节点。
var node=document.getElementById("myList2").lastChild;
var list=document.getElementById("myList1");
list.insertBefore(node,list.childNodes[0]);
- 创建元素的三种方式
- document.write()
弊端：只能往body中添加元素
document.write('<div class="box1">我是div</div>');
innerHTML
弊端：在同级下只能添加一种元素，多个会覆盖
document.getElementById("divObj").innerHTML = "<p>哈哈哈</p>";
document.createElement()
父元素.appendChild(子元素)：给父元素末尾添加子元素
var pObj = document.createElement("p");
divObj1.appendChild(pObj);
动态的创建列表
单击按钮，动态的创建无序列表，渲染在红色边框的box中.
思路：1、创建内容数组
- 获取元素，给按钮绑定单击事件
- 创建ul标签
- 将ul添加到box中
- 遍历数组
- 创建li标签
- 添加内容
- 按钮禁用
- BOM
(1)、BOM的概念
BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，
比如：刷新浏览器、后退、前进、在浏览器中输入URL等
(2)、BOM的顶级对象
window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window注意：window下一个特殊的属性 window.name
(3)、对话框
alert()
prompt()
confirm()
(4)、加载事件
onload事件
onload 事件会在页面或图像加载完成后立即发生。
onload 通常用于 <body> 元素，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
(5)、Location对象
常用属性
// //地址栏上#及后面的内容
// console.log(window.location.hash);
// //主机名及端口号
// console.log(window.location.host);
// //主机名
// console.log(window.location.hostname);
// //文件的路径---相对路径
// console.log(window.location.pathname);
// //端口号
// console.log(window.location.port);
// //协议
// console.log(window.location.protocol);
// //搜索的内容
// console.log(window.location.search);
(6)、History对象
//跳转的
my$("btn1").onclick = function () {
window.location.href = "15test.html";
};
//前进
my$("btn2").onclick = function () {
window.history.forward();
};
//后退
my$("btn").onclick = function () {
window.history.back();
};
(7)、Navigator对象
通过userAgent可以判断用户浏览器的类型
console.log(window.navigator.userAgent);
//通过platform可以判断浏览器所在的系统平台类型.
//console.log(window.navigator.platform);
数组去重
// 第一种 遍历两次数组来去重
var arr = [1, 1, 2, 2, 2, 3, 3, 4, 4, 8, 8, 9, 9, 9]
var arr2 = []
for (i = 0; i < arr.length; i++) {
var flag = true;
for (j = 0; j < arr.length; j++) {
if (arr[i] == arr2[j]) {
flag = false;
}
}
if (flag) {
arr2.push(arr[i])
}
}
console.log(arr2);
// 第二种 indexof和lastIndexof去重
for (var i = 0; i < arr.length; i++) {
if (arr.indexOf(arr[i]) == arr.lastIndexOf(arr[i])) {
arr2.push(arr[i])
} else {
if (arr2.indexOf(arr[i]) == -1) {
arr2.push(arr[i])
}
}
}
console.log(arr2);
// 第三种 利用对象不重复性去重
var obj = {}
for (i = 0; i < arr.length; i++) {
obj[arr[i]] = 0
}
for (key in obj) {
arr2.push(Number(key))
}
console.log(arr2);
// 第四种 利用indexof属性去重
for (i = 0; i < arr.length; i++) {
if (arr2.indexOf(arr[i]) == -1) {
arr2.push(arr[i])
}
}
console.log(arr2);
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
