DOM操作、事件、案例、节点、BOM

DOM操作、事件、案例、节点、BOM

1.案例扩展
(1)、隔行换色
案例一：完成对无序列表的隔行换色（原理~~~通过循环获取元素得到的伪数组进行取余逻辑判断操作）
var btn = document.getElementById(“btn”);
var liObj = document.getElementById(“list”).getElementsByTagName(“li”);
console.log(liObj);
btn.onclick = function () {
//第一种
for (var i = 0; i < liObj.length; i += 2) {
console.log(liObj[i]);
/* if (i % 2 == 0) {
liObj[i].style.color = “red”;
} /
liObj[i].style.color = “red”;
}
//第二种
/ for (var i = 0; i < liObj.length; i++) {
console.log(liObj[i]);
if (i % 2 == 0) {
liObj[i].style.color = “red”;
}
} */
}
思考代码还有没有能优化的空间(是不是还可以使用三元表达式）
演示示例：隔行换色
(2)、美女画廊
效果展示:

点击小图完成大图切换
思路：遍历伪数组，给四张小图绑定单击事件，让当前被单击的小图的src属性值赋给大图的src属性值，让小图的title的属性值，赋给下侧文本内容。

演示示例：美女画廊
课堂练习：案例美女相册
2.阻止a链接跳转
三种写法

<!-- 第一种方法 -->
  <a href="https://www.baidu.com" onclick="alert('单击链接了！'); return false">百度一下</a>
  <a href="https://www.baidu.com" onclick="fn1(); return false">百度两下</a>
 function fn1() {
    alert("单击链接了哈");
  }
第一种缺点：代码不分离，不符合低耦合，高内聚的规范
<!-- 第二种方法 -->
  <a href="https://www.baidu.com" onclick="return fn2();">百度三下</a>
 function fn2() {
    alert("单击百度三了哈！");
    return false;
  }
第二种代码 缺点同上
  <!-- 第三种方法 -->
  <a href="https://www.baidu.com" id="link">百度四下</a>
  document.getElementById("link").onclick = function () {
    alert("单击百度四了哈！");
    return false;
  }

第三种 行为与结构分离 想想还有没有更加优化的空间？
演示示例：阻止a链接跳转
3.新事件
(1)、鼠标事件
案例一：完成对无序列表的隔行换色（原理~通过循环获取元素得到的伪数组进行取余逻辑判断操作）
onmouseover鼠标移入事件：在鼠标指针移动到元素上时触发。
onmouseout 鼠标移出事件：在鼠标指针移出元素后触发
//鼠标移入事件
box1.onmouseover = function () {
this.style.fontSize = “26px”;
this.style.height = “60px”;
console.log(111)
}
// 鼠标移出事件
box1.onmouseout = function () {
this.innerText = “鼠标移出了哈！”;
this.style.height = “30px”;
this.style.fontSize = “16px”;
}
onmouseenter鼠标进入事件：在鼠标指针进入到元素上时触发。
onmouseleave 鼠标离开事件：在鼠标指针离开元素后触发
// 鼠标进入事件
box2.onmouseenter = function () {
this.style.borderRadius = “12px”;
this.style.backgroundColor = “blue”;
}
//鼠标的离开事件
box2.onmouseleave = function () {
this.style.borderRadius = “0”;
this.style.backgroundColor = “purple”;
}
onfocus获取焦点事件：在鼠标光标获取输入框焦点时触发
onblur失去焦点事件：在鼠标光标失去焦点时触发。
//获取焦点事件
user.onfocus = function () {
this.style.border = “3px solid red”;
this.style.outline = “0”;
}
// 失去焦点事件
user.onblur = function () {
console.log(this.value);
}
onclick单击事件：在鼠标指针单击时触发
ondblclick双击事件：在鼠标光标双击时触发。
box1.ondblclick = function () {
this.style.backgroundColor = “yellow”;
}
(2)、键盘事件
onkeydown：键盘按下
onkeyup:键盘抬起
document.getElementById(“user”).onkeydown = function () {
console.log(“按下了！！1”);
}
document.getElementById(“user”).onkeyup = function () {
console.log(“抬起来了！！1”);
console.log(this.value);
}
(3)、浏览器事件
案例一：完成对无序列表的隔行换色（原理~通过循环获取元素得到的伪数组进行取余逻辑判断操作）
onload:浏览器加载完成执行
onscroll:滚动浏览器滚动条时触发
window.onscroll = function () {
console.log(“滚动了！”);
}
演示示例：新事件
4.文本内容属性
(1)、innerText和textContent
设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持
(2)、innerText和innerHTML的区别

使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
innerHTML是可以设置文本内容
innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML
演示示例：innerText与innerHTML
课堂练习：乾坤大挪移
5.元素的属性操作
(1)、自定义属性
元素除了本身的属性之外可以设置自定义属性
< div id=“box1” class=“box_1” name1=“divObj”>我是盒子
(2)、获取属性
getAttribute(“属性的名字”)
getAttribute(“属性”):不仅可以获取元素本身的属性的属性值，还可以获取元素自定义的属性的属性值
console.log(in1.getAttribute(“type”));//text
console.log(in1.getAttribute(“name”));//user
console.log(in1.getAttribute(“id”));//text1
console.log(in1.getAttribute(“style”));//color: red;
(3)、设置属性
setAttribute(“属性的名字”,“属性的值”);
元素的属性的设置:不仅可以设置元素本身的属性，还可以设置元素自定义的属性
setObj1.onclick = function () {
in1.setAttribute(“name”, “password”);
// in1.setAttribute(“class”, “”);
in1.className = “”;
// in1.setAttribute(“style”, “border:5px dotted pink”);
in1.style.border = “5px dotted pink”;
console.log(in1.getAttribute(“name”));//password
}
(3)、移除属性
removeAttribute(“属性”):不仅可以移除元素本身的属性，还可以移除元素自定义的属性
var removeObj = document.getElementById(“remove”);
removeObj.onclick = function () {
in1.removeAttribute(“class”);
div1.removeAttribute(“name1”);
}
演示示例：元素的属性设置与获取
6.元素样式设置的几种方式
能用switch语句实现的就一定可以使用if实现，但是反之不一定，如果是区间范围就采用if，如果是等值判断使用switch
1、对象.style
2、 对象.className
3、对象.setAttribute(“style”)
4、对象.setAttribute(“class”)
5、对象.style.setProperty(“CSS属性”,“CSS属性值”)
6、对象.style.cssText

< body>
  <div class="box1" id="box1"></div>
  <input type="button" value="改变样式" id="change">
< /body>
< script>
  var box = document.getElementById("box1");
  var changeBtn = document.getElementById("change");
  changeBtn.onclick = function ( ) { 
    // 1、对象.style
    // box.style.backgroundColor = "red";
    // 2、对象.className
    // box.className = "box2";
    // 3、对象.setAttribute("style")
    // box.setAttribute("style", "background-color:red");
    // 4、对象.setAttribute("class")
    // box.setAttribute("class", "box2");
    // 5、对象.style.setProperty("CSS属性","CSS属性值")
    // box.style.setProperty("background-color", "red");
    // 6、对象.style.cssText
    box.style.cssText = "background-color: red;height:80px";
  }
< /script>

1.节点操作
(1)、什么是节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
整个文档是一个文档节点 document
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
(2)、节点类型
通过noteType属性可以获取节点的类型
document的节点类型—9
console.log(document.nodeType);//9
标签的节点类型—1
var box1 = document.getElementById(“box1”);
console.log(box1.nodeType);//1
属性的节点类型—2，getAttributeNode(“属性”):获取元素的属性节点
var attr1 = box1.getAttributeNode(“class”);
console.log(attr1.nodeType);//2
文本的节点类型—3，元素的第一个子节点就是文本节点
console.log(box1.firstChild.nodeType);//3
(3)、节点名称
通过nodeName可以获取元素的节点名称。
document的节点名称—#document
console.log(document.nodeName);//#document
标签的节点名称—大写的标签名
console.log(box1.nodeName);//DIV
属性的节点名称—属性名
console.log(attr1.nodeName);//class
文本的节点名称—#text
console.log(box1.firstChild.nodeName);//#text
(4)、节点值
通过nodeValue可以获取元素的节点的值。
document的节点值—null
console.log(document.nodeValue);//null
标签的节点值—null
console.log(box1.nodeValue);//null
属性的节点值—属性值
console.log(attr1.nodeValue);//boxCl
文本的节点值—文本的内容
console.log(box1.firstChild.nodeValue);//我是div元素
演示示例：节点类型、名称、值
课堂练习：利用节点隔行换色
2.节点之间的关系
(1)、HTML DOM 节点树
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
(2)、节点之间的关系
节点之间的关系就是嵌套关系（父子关系）、并列关系（兄弟关系）。注意区分节点与元素节点之间的区别。
父节点–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]);
演示示例：插入节点
3.创建元素的三种方式
(1)、document.write()
弊端：只能往body中添加元素
document.write(‘

我是div

’);
(2)、innerHTML
弊端：在同级下只能添加一种元素，多个会覆盖
document.getElementById(“divObj”).innerHTML = “

哈哈哈

”;
(3)、document.createElement()
父元素.appendChild(子元素)：给父元素末尾添加子元素
var pObj = document.createElement(“p”);
divObj1.appendChild(pObj);
演示示例：创建元素的几种方式
(4)、动态的创建列表
单击按钮，动态的创建无序列表，渲染在红色边框的box中.
思路：1、创建内容数组
2、获取元素，给按钮绑定单击事件
3、创建ul标签
4、将ul添加到box中
5、遍历数组
6、创建li标签
7、添加内容
8、按钮禁用
演示示例：动态的创建列表
4.事件进阶
(1)、事件三要素
事件源：是指那个元素引发的事件。比如当你点击cdsn图标的时候，会跳转到cdsn首页。那么这个cdsn图标就是事件源,再或者，可以这样理解， 当你对某个元素执行动作的时候，会触发一系列效果（动画，跳转…），那么这个元素就是事件源。
事件类型：例如，点击，鼠标划过，按下键盘，获得焦点。
事件驱动程序：事件驱动程序即执行的结果，例如，当你点击cdsn图标的时候，会跳转到cdsn首页。那么跳转到cdsn首页就是事件的处理结果。
执行事件的步骤：获取元素、绑定事件、书写事件驱动程序
(2)、监听事件
绑定监听事件 addEventListener(“事件的类型”,事件的处理程序)
box1.addEventListener(“click”, myFunc)
function myFunc() {
this.style.backgroundColor = “blue”;
}
解绑监听事件removeEventListener(“事件的类型”,事件的处理程序)
box1.removeEventListener(“click”, myFunc);
演示示例：绑定监听事件
(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)、事件冒泡
什么是冒泡事件
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
假设一个元素div，它有一个下级元素p。

　　

元素

这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？ 如何阻止冒泡（存在兼容性） e.stopPropagation(); 谷歌和火狐支持, window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持

演示示例：事件冒泡
5.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 通常用于 元素，在页面完全载入后(包括图片、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);
演示示例：BOM
6.定时器
(1)、setInteval()
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
clearInteval()
clearInterval() 方法可取消由 setInterval() 函数设定的定时执行操作。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
//定时器
//参数1:函数
//参数2:时间—毫秒—1000毫秒–1秒
//执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数…
//返回值就是定时器的id值
(2)、setTimeout()
另一个定时器定义和用法
方法用于在指定的毫秒数后调用函数或计算表达式。
提示： 1000 毫秒= 1 秒。
提示： 如果你只想重复执行可以使用 setInterval() 方法。
提示： 使用 clearTimeout() 方法来阻止函数的执行。
参数：param1回调函数，param2时间

返回值: 返回一个 ID（数字），可以将这个ID传递给 clearTimeout() 来取消执行