一、节点操作
(1)什么是节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
(2)节点类型
通过nodeType属性可以获取节点的类型
document的节点类型---9
标签的节点类型---1
属性的节点类型---2,getAttributeNode("属性"):获取元素的属性节点
文本的节点类型---3,元素的第一个子节点就是文本节点
(3)节点名称
通过nodeName可以获取元素的节点名称。
document的节点名称---#document
标签的节点名称---大写的标签名
属性的节点名称---属性名
文本的节点名称---#text
(4)节点值
通过nodeValue可以获取元素的节点的值。
document的节点值---null
标签的节点值---null
属性的节点值---属性值
文本的节点值---文本的内容
二、节点之间的关系
(1)HTML DOM 节点树
所有 HTML 元素(节点)均可被修改,也可以创建或删除节点。
(2)节点之间的关系
节点之间的关系就是嵌套关系(父子关系)、并列关系(兄弟关系)
父节点--parentNode
父元素节点--parentElement
子节点--childNodes:标签节点、文本节点、注释节点 得到的是伪数组
子元素节点--children :标签节点
第一个子节点--firstChild:文本
第一个子元素节点--firstElementChild:第一个标签
最后一个子节点--lastChild:文本
最后一个子元素节点--lastElementChild: 最后一个标签
上一个子节点--previousSibling:文本
上一个子元素节点--previousElementSibling: 上一个标签
下一个子节点 --nextSibling:文本
下一个子元素节点--nextElementSibling: 下一个标签
注意:firstChild、lastChild、previousSibling、nextSibling获取到的都是文本,如果没有就是文本节点名称#text, firstElementChild、lastElementChild、previousElementSibling、nextElementSibling获取到的都是标签,如果没有就是空。
(3)插入节点
insertBefore() 方法可在已有的子节点前插入一个新的子节点
也可以使用 insertBefore 方法来 插入/移除 已存在的元素
三、BOM
(1)BOM的概念
BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象
(2)BOM的顶级对象
window是浏览器的顶级对象,当调用window下的属性和方法时,可以省略window注意:window下一个特殊的属性 window.name
(3)对话框
alert()
prompt()
confirm()
(4)加载事件
onload事件:会在页面或图像加载完成后立即发生。
(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);
DOM节点操作和BOM
最新推荐文章于 2024-07-20 23:59:39 发布