节点操作
什么是节点
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
整个文档是一个文档节点 document
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
1、节点类型
通过noteType属性可以获取节点的类型
(1)、 document的节点类型---9
console.log(document.nodeType);//9
(2)、标签的节点类型---1
var box1 = document.getElementById("box1");
console.log(box1.nodeType);//1
(3)、属性的节点类型---2,getAttributeNode("属性"):获取元素的属性节点
var attr1 = box1.getAttributeNode("class");
console.log(attr1.nodeType);//2
(4)、属性的节点类型---2,getAttributeNode("属性"):获取元素的属性节点
var attr1 = box1.getAttributeNode("class");
console.log(attr1.nodeType);//2
2、节点名称
通过nodeName可以获取元素的节点名称。
(1)、document的节点名称---#document
console.log(document.nodeName);//#document
(2)、标签的节点名称---大写的标签名
console.log(box1.nodeName);//DIV
(3)、属性的节点名称---属性名
console.log(attr1.nodeName);//class
(4)、文本的节点名称---#text
console.log(box1.firstChild.nodeName);//#text
3、节点值
通过nodeValue可以获取元素的节点的值。
(1)、document的节点值---null
console.log(document.nodeValue);//null
(2)、标签的节点值---null
console.log(box1.nodeValue);//null
(3)、属性的节点值---属性值
console.log(attr1.nodeValue);//boxCl
(4)、文本的节点值---文本的内容
console.log(box1.firstChild.nodeValue);//我是div元素
2.节点之间的关系
1、节点之间的关系
节点之间的关系就是嵌套关系(父子关系)、并列关系(兄弟关系)
(1)、父节点--parentNode
父元素节点--parentElement
(2)、子节点--childNodes:标签节点、文本节点、注释节点 得到的是伪数组
子元素节点--children :标签节点
(3)、第一个子节点--firstChild:文本
第一个子元素节点--firstElementChild:第一个标签
(4)、最后一个子节点--lastChild:文本
最后一个子元素节点--lastElementChild: 最后一个标签
(5)、上一个子节点--previousSibling:文本
上一个子元素节点--previousElementSibling: 上一个标签
(6)、下一个子节点 --nextSibling:文本
下一个子元素节点--nextElementSibling: 下一个标签
总结:firstChild、lastChild、previousSibling、nextSibling获取到的都是文本,如果没有就是文本节点名称#text, firstElementChild、lastElementChild、previousElementSibling、nextElementSibling获取到的都是标签,如果没有就是空。
3、节点隔行换色
(通过遍历伪数组然后奇偶数判断),(或者循环累加时+2),现在我是(利用节点之间的关系)以及(节点的名称值)等实现隔行换色的效果
第一种:奇偶数判断
第二种:累加2
第三种:子元素节点
第四种:节点操作
4、插入节点
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
node.insertBefore(newnode,existingnode) 参数newnode是要插入的节点对象,existingnode是要添加新的节点前的子节点。
3.创建元素的三种方式
1、document.write()
弊端:只能往body中添加元素
document.write('<div class="box1">我是div</div>');
2、innerHTML
弊端:在同级下只能添加一种元素,多个会覆盖
document.getElementById("divObj").innerHTML = "<p>哈哈哈</p>";
3、document.createElement()
父元素.appendChild(子元素):给父元素末尾添加子元素
var pObj = document.createElement("p");
divObj1.appendChild(pObj);
BOM
1、BOM的概念
BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理,
2、BOM的顶级对象
window是浏览器的顶级对象,当调用window下的属性和方法时,可以省略window注意:window下一个特殊的属性 window.name
3、对话框
alert() //弹窗
prompt() // 确定 取消 弹窗
confirm() // 输入东西 弹窗
4、加载事件
onload事件
onload 事件会在页面或图像加载完成后立即发生。
onload 通常用于 <body> 元素,在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
5、Location对象
常用属性
6、History对象
7、Navigator对象