1.节点操做
1.1节点定义
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
整个文档是一个文档节点 document
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
1.2节点类型
通过noteType属性可以获取节点的类型
document的节点类型---9
标签的节点类型---1
文本的节点类型---3,元素的第一个子节点就是文本节点
1.3节点名称
通过nodeName可以获取元素的节点名称。
document的节点名称---#document
标签的节点名称---大写的标签名
属性的节点名称---属性名
文本的节点名称---#text
1.4节点值
通过nodeValue可以获取元素的节点的值。
document的节点值---null
标签的节点值---null
属性的节点值---属性值
文本的节点值---文本的内容
2.节点之间的关系
2.1HTML DOM节点树
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树:
通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点。
2.2节点之间的关系
节点之间的关系就是嵌套关系(父子关系)、并列关系(兄弟关系)。注意区分节点与元素节点之间的区别。
父节点--parentNode
父元素节点--parentElement
子节点--childNodes:标签节点、文本节点、注释节点 得到的是伪数组
子元素节点--children :标签节点
第一个子节点--firstChild:文本
第一个子元素节点--firstElementChild:第一个标签
最后一个子节点--lastChild:文本
最后一个子元素节点--lastElementChild: 最后一个标签
上一个子节点--previousSibling:文本
上一个子元素节点--previousElementSibling: 上一个标签
下一个子节点 --nextSibling:文本
下一个子元素节点--nextElementSibling: 下一个标签
总结:firstChild、lastChild、previousSibling、nextSibling获取到的都是文本,如果没有就是文本节点名称#text, firstElementChild、lastElementChild、previousElementSibling、nextElementSibling获取到的都是标签,如果没有就是空。
2.3节点隔行换色
第一种:奇偶数判断
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";
}
}
2.4插入节点
insertBefore() 方法可在已有的子节点前插入一个新的子节点。
node.insertBefore(newnode,existingnode) 参数newnode是要插入的节点对象,existingnode是要添加新的节点前的子节点。
var node=document.getElementById("myList2").lastChild;
var list=document.getElementById("myList1");
list.insertBefore(node,list.childNodes[0]);
3.创建元素的三种方式
3.1 document.write()
弊端:只能往body中添加元素
document.write('<div class="box1">我是div</div>');
3.2innerHTML
弊端:在同级下只能添加一种元素,多个会覆盖
document.getElementById("divObj").innerHTML = "<p>哈哈哈</p>";
3.3 document.createElemnet()
父元素.appendChild(子元素):给父元素末尾添加子元素(文本为createTextNode())
var pObj = document.createElement("p");
divObj1.appendChild(pObj);
4.事件进阶
4.1事件三要素
事件源:是指那个元素引发的事件。比如当你点击cdsn图标的时候,会跳转到cdsn首页。那么这个cdsn图标就是事件源,再或者,可以这样理解, 当你对某个元素执行动作的时候,会触发一系列效果(动画,跳转....),那么这个元素就是事件源。
事件类型:例如,点击,鼠标划过,按下键盘,获得焦点。
事件驱动程序:事件驱动程序即执行的结果,例如,当你点击cdsn图标的时候,会跳转到cdsn首页。那么跳转到cdsn首页就是事件的处理结果。
执行事件的步骤:获取元素、绑定事件、书写事件驱动程序
4.2监听事件(对比onclick绑定点击事件)
绑定监听事件 addEventListener("事件的类型",事件的处理程序)
box1.addEventListener("click", myFunc)
function myFunc() {
this.style.backgroundColor = "blue";
}
解绑监听事件removeEventListener("事件的类型",事件的处理程序)
box1.removeEventListener("click", myFunc);
4.3事件对象
任何事件都有内置对象event,事件对象的兼容性写法为
var event = event || window.event;
// 事件的类型
console.log(event.type);
// 元素的ID
console.log(event.target.id);
// 文本的内容
console.log(event.target.innerText);
// 事件的触发点是距离浏览器左侧的横纵坐标
console.log("横坐标:" + event.clientX + "," + "纵坐标:" + event.clientY);
console.log("横坐标:" + event.pageX + "," + "纵坐标:" + event.pageY);
console.log("我单击header!");
4.4事件冒泡
事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。
假设一个元素div,它有一个下级元素p。
<div>
<p>元素</p>
</div>
如何阻止冒泡(存在兼容性)
e.stopPropagation(); 谷歌和火狐支持,
window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持
5.BOM
5.1概念
BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。
5.2对话框
alert()
prompt()
confirm()
5.3加载事件
onload事件
onload 事件会在页面或图像加载完成后立即发生。
onload 通常用于 <body> 元素,在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
5.4Location
常用属性
// //地址栏上#及后面的内容
// 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);
5.5History对象
//跳转的
my$("btn1").onclick = function () {
window.location.href = "15test.html";
};
//前进
my$("btn2").onclick = function () {
window.history.forward();
};
//后退
my$("btn").onclick = function () {
window.history.back();
};
5.6 Navigator
通过userAgent可以判断用户浏览器的类型
console.log(window.navigator.userAgent);
//通过platform可以判断浏览器所在的系统平台类型.
//console.log(window.navigator.platform);
6.定时器
6.1setlnterval
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
clearInterval()
clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
6.2 setTimeout
另一个定时器定义和用法
方法用于在指定的毫秒数后调用函数或计算表达式。
提示: 1000 毫秒= 1 秒。
提示: 如果你只想重复执行可以使用 setInterval()方法。
提示: 使用 clear Timeout()方法来阻止函数的执行。
参数:param1回调函数,param2时间
返回值: 返回一个 ID(数字),可以将这个ID传递给 clearTimeout() 来取消执行