二、（7）JavaScript DOM Node对象
JavaScript-DOM
HTML DOM Node对象
HTML文档中的每一个成员都是一个节点对象，节点对象具有自己的属性和方法。
找到HTML节点和Body节点
document.documentElement -> html标签
可返回存在于 XML 以及 HTML 文档中的文档根节点
document.body ->body标签
对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问。
如果我们要对页面上添加显示元素,一般来说会使用这种方式
我们要注意的区别:
document.documentElement.clientHeight:它拿到的是整个窗口高度
document.body.clientHeight:拿到内容的高度
Node对象的属性与方法总表
查询节点
案例：
<body>
<header id="header">头部</header>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li id="last">第四行</li>
</ul>
<script>
// 3. 查找节点
/*
1.获取节点：
document.getElementById(); //通过ID查找节点
document.getElementTagName(); //查找当前的节点
document.getElementByClassName(); //通过类名查找节点
document.getElementByName();//通过名称获取节点
document.querySelector();
document.querySeoectorAll();
2.查找父子节点
parentNode 父节点
firstChild 第一个节点
lastChild 最后一个节点
.....
*/
//获取当前ul节点
var ul=document.getElementsByTagName("ul")[0];
//查找父节点
var parentNode = ul.parentNode;
//查找第一个子节点 文本节点
var firstChild = ul.firstChild;
//查找最后一个节点
var lastChild = ul.lastChild;
//查找所有文本节点
var childNodes = ul.childNodes;
//查找所有子节点（不包括本文节点）
var children = ul.children;
//查找节点的名称
var nodeName = ul.nodeName;
//查找节点的类型
var nodeType = ul.nodeType;
console.log(nodeType);
</script>
</body>
增加节点
案例：
<body>
<header id="header">头部</header>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li id="last">第四行</li>
</ul>
<script>
// 1.增加一个新节点
// 方式一：通过id获取
var top = document.getElementById('header');
top.innerHTML='<strong>LOGO</strong>'+top.innerHTML;
//方式二：通过创建节点
//创建节点
var s = document.createElement("strong");//创建的节点只是在内存中
s.innerHTML="LOGO";//添加内容
s.id="logo";//添加标签id
s.className="myclass";//添加类名
header.appendChild(s);//添加节点
</script>
</body>
修改节点 
案例：
<ul id="parent">
<li>第一行</li>
<li id="two">第二行</li>
<li>第三行</li>
<li>第四行</li>
</ul>
//需求： 用新节点替换two节点
//>>1. 创建新节点
//>>1.1 创建元素节点
var liobj = document.createElement("li");
//>>1.2 创建属性节点
liobj.className = "xxx";
//>>1.3 创建文本节点
liobj.innerHTML = "<p>我是新增的段落</p>";
//>>2. 获取要替换的节点
var two = document.getElementById("two");
//>>3. 替换
//>>3.1 获取父元素
var parent = document.getElementById("parent");
//>>3.2 用新元素替换旧元素
parent.replaceChild(liobj,two);
//>>4. 替换属性节点
liobj.className = "aaa";
删除节点 
案例：
// 2. 删除节点 var ul = document.getElementsByTagName("ul")[0];//获取ul节点,不可直接删除 //获取最后一行，将其删除 var byId = document.getElementById("last"); ul.removeChild(byId);//删除节点，参数必须是一个节点，不能是一个字符串 //删除自己 // ul.remove();
创建节点
案例：
<body>
<header id="header">头部</header>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li id="last">第四行</li>
</ul>
<script>
// 1.增加一个新节点
// 方式一：通过id获取
var top = document.getElementById('header');
top.innerHTML='<strong>LOGO</strong>'+top.innerHTML;
//方式二：通过创建节点
//创建节点
var s = document.createElement("strong");//创建的节点只是在内存中
s.innerHTML="LOGO";//添加内容
s.id="logo";//添加标签id
s.className="myclass";//添加类名
header.appendChild(s);//添加节点
</script>
</body>
节点信息 
案例：
<body>
<header id="header">头部</header>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li id="last">第四行</li>
</ul>
<script>
//获取当前ul节点
var ul=document.getElementsByTagName("ul")[0];
//查找节点的名称
var nodeName = ul.nodeName;
//查找节点的类型
var nodeType = ul.nodeType;
console.log(nodeType);
</script>
</body>
节点实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ border-collapse: collapse; width: 500px; margin: 10px auto; text-align: center; } th,td{border: 1px solid red} p{text-align: center;} </style> </head> <body> <table> <tr> <td>序号</td> <td>姓名</td> <td>性别</td> <td>爱好</td> <td>备注</td> </tr> <tr> <td>001</td> <td>张三</td> <td>男</td> <td>打游戏</td> <td>null</td> </tr> <tr> <td>002</td> <td>李四</td> <td>女</td> <td>看电视</td> <td>null</td> </tr> <tr> <td>003</td> <td>王五</td> <td>女</td> <td>看书</td> <td>null</td> </tr> <tr><td>004</td> <td>马六</td> <td>男</td> <td>看电视打游戏</td> <td>null</td></tr> </table> <p><button type="button" id="addNew">添加</button> <button type="button" id="del">删除</button> <script> var byId = document.getElementById("addNew");//获取按钮 //绑定事件 byId.onclick=function () { //创建行 var newline="<tr><td>005</td><td>小珍</td><td>女</td><td>玩游戏</td><td>null</td></tr>"; //查找表格节点 var table = document.getElementsByTagName("table")[0]; table.innerHTML+=newline; } del.onclick=function () { var del = document.getElementsByTagName("tbody")[0]; var lastChild = del.lastChild;//获取最后一个 del.removeChild(lastChild);//包括文本，双击两次 } </script> </body> </html>
不同类型的元素节点信息（了解）
案例：
//查找节点的名称 var nodeName = ul.nodeName; //查找节点的类型 var nodeType = ul.nodeType;
innerHTML与innerText
事件的初步认识（重点）
事件与事件处理函数
事件：是用户与计算机交互的方法。比如：单击、鼠标放上、双击等，当然有的事件是由对象发出,比如onload事件；
事件处理函数：就是JS中，当事件发生时，去调用函数。在事件前加“on”，比如：onclick、ondblclick(双击事件)、onchange(改变事件)
事件绑定的三种方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 方式一：在标签中绑定事件--> <h1 onclick="show()" id="tiele1">自在飞花轻似梦，无边丝雨思如愁</h1> <!--方式二： 事件属性绑定事件--> <h2 id="title2">自在飞花轻似梦，无边丝雨思如愁</h2> <!--方式三：W3C标准绑定事件--> <!-- 事件源.addEventListener()方法--> <h3 id="title3">自在飞花轻似梦，无边丝雨思如愁</h3> <script> // 方式一： function show() { tiele1.style.background="#f00"; } // 方式二： title2.onclick=function () { this.style.background="#0f0"; } // 方式三 title3.addEventListener("click",function () { title3.style.background="#00f"; }); </script> </body> </html>
常用事件
鼠标事件
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 200px; height: 200px; background:#ff0000; } </style> </head> <body> <!--事件处理--> <div id="box"></div> <script> box.onmouseover=function () { this.style.background="#00f"; } box.onmouseout=function () { this.style.background="#f00"; } </script> </body> </html>
键盘事件
表单事件
窗口事件：两种书写方式
鼠标事件练习
<div id="box" onmouseover="a()" onmouseout="b()"></div> <script type="text/javascript"> //需求： 鼠标移入div框改变div框的背景颜色 //>>1. 制作静态效果 //>>2. 定义函数 function a(){ //>>3. 获取div var box = document.getElementById("box"); //>>4. 改变背景颜色 box.style.backgroundColor = "blue"; } //需求： 鼠标移出div，改变div背景颜色 //>>2. 定义函数 function b(){ //>>3. 获取div var box = document.getElementById("box"); //>>4. 改变背景颜色 box.style.backgroundColor = "red"; } </script>
事件处理函数返回值
某些事件发生时，浏览器会自动执行默认的动作。而事件句柄的返回值会影响浏览器默认动作的执行。如果事件句柄不返回值，或者返回true，默认动作被执行；如果事件句柄返回false，则默认动作不发生。
例如：当单击删除链接时
<a href="http://www.sina.com.cn" onclick="return confirm('是否确认删除操作？')">删除商品</a>
/*
需求:点击删除按钮，弹出一个提示框，
如果点击是确定按钮，执行浏览器默认行为： 否则： 阻止浏览器默认行为
*/
<a href="http://www.baidu.com" onclick="return a()">删除1</a>
//1. 定义函数
function a(){
//弹出提示框
var result = confirm("是否删除数据");
//判断result，阻止浏览器默认行为
if(!result){
return false;
}
}
例如：登录提交判断
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form method="get" action="#" id="myform"> <p>账号：<input type="text" id="username"></p> <p>账号：<input type="password" id="pad"></p> <p><button type="submit">立即登录</button></p> </form> <script> //密码长度大于6，用户名长度大于3 myform.onsubmit=function () { if (username.value.length<3){ alert("用户名长度不够，请重新输入！"); return false; } if (pad.value.length<6){ alert("密码长度小于6"); return false; } } </script> </body> </html>
作业
1. 添加一个a标签，href属性为http://www.baidu.com，内容为”百度一下”，添加到网页的body中；
2.删除id=”box”下面所有的元素；
<div id=”box”>
<p>苹果</p>
<p>香蕉</p>
<p>梨子</p>
<p>桃子</p>
</div>
3. 给div盒子添加鼠标事件，移入宽度为200px，移出宽度变为原来的大小100px；
4. 验证注册表单用户名长度是否大于等于6位并且小于等于12位，如果条件成立提交表单到regsiter.html页面，否则弹出提示框注册失败。
5. （偏难、选做）获取当前网页的大小，创建一个div设置高度和宽度与网页一样大，添加到网页中，遮挡网页的内容，并且div是半透明的背景色。
重点整理
1. JS的组成
核心语法：ECMAScript规定的基本语法，如：变量、数据类型、运算符、数组、函数、对象
BOM：浏览器对象模型，让JS可以操作浏览器的功能
DOM：文档对象模型，让JS可以操作HTML标签和CSS样式
2. BOM和DOM
BOM：浏览器对象模型，提供一套操作浏览器的接口，window对象就是BOM的直接体现
DOM：文档对象模型，提供一套操作HTML和CSS的接口，document对象就是DOM的直接体现
document对象是window的子对象， DOM是BOM的一部分
3. window对象
1) 什么是window对象
window对象是全局对象，可以在任意地方调用，可以省略不写
全局对象和函数，都是window的属性和方法
2) window的属性
.name 窗口名称
.scrollY Y轴滚动的位置
.onscroll 滚动事件属性
3) window的方法
.scroll() 滚动到指定的位置
.alert() 弹出警告框
.confirm() 弹出确认框，返回确认的结果
.setInterval() 设置周期定时器，可以多次执行
.setTimeout() 设置超时定时器，只能执行一次
.clearInterval()清除周期定时器
.clearTimeout() 清除超时定时器
4) 其它子对象
.document 文档对象
.screen 屏幕对象
.width
.height
.history 历史记录对象
.back()
.forward()
.go()
.location 地址栏对象
.hash
.href
.navigator 浏览器对象
.userAgent
4. DOM
1) 相关概念
DOM：文档对象模型
DOM树：也称为文档树或节点树，将一个HTML文档看成是一颗树，每一个标签都是节点，有层次关系
根节点：html标签
元素节点：普通的标签
文本节点：标签对中间的内容
属性节点：标签的属性
2) 获取标签
.getElementById('id值');
.getElementsByTagName('标签名');
.getElementsByName();
.getElementsByClassName();
.querySelector(选择器);
.querySelectorAll(选择器);
3) 值和属性操作
.innerHTML 操作标签对中间的HTML内容
.innerText 操作标签对中间的普通文本
.value 操作表单元素的值
属性操作：所有HTML标签的属性，都可以直接在JS中进行操作
