DOM
DOM，全称Document Object Model文档对象模型。
JS中通过DOM来对HTML文档进行操作
节点 Node——构成HTML文档最基本的单元。常用节点分为四类
-
文档节点：整个HTML文档 。文档节点document，代表的是整个HTML文 档
-
元素节点：HTML文档中的HTML标签 。 HTML中的各种标签都是元素节点。浏览器会将页面中所 有的标签都转换为一个元素节点， 我们可以通过document的方法来获取元素节点。
-
属性节点：元素的属性 。表示的是标签中的的属 性，
注意：①属性节点并非元素节点的子节点，而是元素节点的一部分。
②一般不使用属性节点。
-
文本节点：HTML标签中的文本内容 。是元素节点的子节点 ；包括纯文本内容、一堆空格 。
window.onload = function（）{}
该函数写在head标签的script内，意思是页面加载完毕后才加载script的这些事件
若script写在body标签内，则写在最后
获取元素节点
1.getElementById() – 通过id属性获取一个元素节点对象
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
var bj = document.getElementById("bj")
alert(bj.innerHTML)
};
2.getElementsByTagName() – 通过标签名获取一组元素节点对象
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
alert(lis[i].innerHTML);
}
};
3.getElementsByName() – 通过name属性获取一组元素节点对象
var btn03 = document.getElementById("btn03");
btn03.onclick = function () {
var names = document.getElementsByName("gender");
for (var n = 0; n < names.length; n++) {
alert(names[n].value);
}
};
获取元素子节点
//查找#city下所有li节点
var btn04 = document.getElementById("btn04");
btn04.onclick = function () {
var city = document.getElementById("city");
var cli = city.getElementsByTagName("li");
for (var i = 0; i < cli.length; i++) {
alert(cli[i].innerHTML);
}
};
-
childNodes 属性，表示当前节点的所有子节点
但把文本节点也算进去（ie8以上不会算），用.children属性可解决（ie均兼容）
//返回#city的所有子节点 //获取按钮这个事件 var btn05 = document.getElementById("btn05"); //为按钮绑定一个点击事件 btn05.onclick = function () { //获取id为city节点 var cities = document.getElementById("city"); //查找#city下所有li节点 // var cns = cities.childNodes; //其中把文本也算进去了，比如标签间的空格、提行,共9个 var cns = cities.children;//其中只有标签元素的数量，4个 alert(cns.length); } -
firstChild 属性，表示当前节点的第一个子节点
也会将文本算进去，用.firstElementChild（不兼容ie8以上）
var btn06=document.getElementById("btn06"); btn06.onclick=function(){ var phone=document.getElementById("phone"); // var firNode=phone.firstChild; //获取当前元素的第一个子节点 var firNode=phone.firstElementChild;//获取当前元素的第一个子元素，避免识别空格。但不兼容ie8以上 alert(firNode.innerHTML) } -
lastChild 属性，表示当前节点的最后一个子节
图片切换练习95
思路、难点：
1.设置div、img、button的样式[^ （img的样式要在其他样式的上面）]
2.绑定button的点击事件
3.将所有图片的src放在一个数组里
(因为getElementsByTagName返回的是数组，但我们需要数组里面的元素，且这里只有一种元素，故要用【0】将其取出 。则：var img = document.getElementsByTagName(“img”)[0]😉
4.通过调用数组里的元素 i，改变当前图片的路径
5.通过 i的值来中在文字表示当前是第几张图[^ 注意 i 的取值]
98表单的全选练习——爱好的运动
包括，全选、全不选、反选、提交这四个按钮
以及，四种球类运动的复选框、一个全选/全不选复选框。繁琐，难度不大
难点：1.反选按钮的优化
2.全选/全不选，受其余四个复选框的影响。则全选/全不选的按钮，先为这四个绑定点击事件，再在每个点击事件判断其它三个按钮的勾选情况
101DOM的剩余方法
1.getElementsByClassName()
可以根据class属性值获取一组元素节点对象， 但是该方法不支持IE8及以下的浏览器
2.document.querySelector()
* - 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
* - 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
* - 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
3.document.querySelectorAll()
* - 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
* - 即使符合条件的元素只有一个，它也会返回数组
102.DOM的增删——最喜欢的城市
1.document.createElement 添加新的元素
2.document.createTextNode 添加新的文本节点
3.appendChild() 向父节点中添加一个新的子节点
用法：父节点.appendChild(子节点)
4.insertBefore() 在指定的子节点前插入新的子节点
用法：父节点.insertBefore(新节点,旧节点)
5.replaceChild() 用新的子节点替换已有的子节点
语法：父节点.replaceChild(新节点,旧节点);
6.removeChild() 删除一个子节点
语法：父节点.removeChild(子节点);
子节点.parentNode.removeChild(子节点)
7.使用innerHTML也可以完成DOM的增删改的相关操作 ,一般我们会两种方式结合使用 。如：
var li=document.createElement("li");
li.innerHTML="广州";
city.appendChild(li);
103.添加删除记录——表格内删除员工
1.this 在点击函数里，this指的就是该函数
for (var i = 0; i < allA.length; i++) {
allA[i].onclick = function () {
///
var deleteTr = this.parentNode.parentNode;
///
var deleteName = deleteTr.children[0].innerHTML;
var flag = confirm("确认删除" + deleteName + "吗？");
if (flag) {
deleteTr.parentNode.removeChild(deleteTr);
}
return false;
其中this，不能用allA [ i ]来替代，因为fro循环会在页面加载完成后立马执行，但响应函数是在被点击后才执行。当响应函数执行时，for循环早已执行完毕。
2. confirm（） 弹出带有一段信息和确认按钮、取消按钮的弹窗 （括号内写确认信息的文字）
3.通过在响应函数的最后return false;来取消超链接的默认行为
(点击超链接，会跳转页面，是超链接的默认行为 。)
103.添加删除记录——表格内添加员工
思路
1.为提交按钮绑定点击函数
2.获取输入的name、email、salary内的value值
3.在表格里添加一个tr、四个td节点；三个text文本节点、a元素节点和a的text节点，并组合到tr中
（在td节点中添加a元素，并设置的href，再添加文字delete）
4.将获取到的四个信息添加到新的td中
5.为新的节点重新再绑定一个删除响应函数
6.将两个删除响应函数简化成一个
思路优化
1.为提交按钮绑定点击函数
2.获取输入的name、email、salary内的value值
3.创建一个tr节点，直接为tr写入内容
//直接为tr写入内容
tr.innerHTML="<td>"+name+"</td>"+
"<td>"+email+"</td>"+
"<td>"+salary+"</td>"+
"<td><a href='#'>Delete</a></td>";
4.为新增的a绑定点击函数
5.为新来的aHref信息设置delete的点击函数
107.使用DOM操作CSS的内联样式
通过JS修改元素的样式
1.语法： 修改：元素.style.样式名 = 样式值 读取：元素.style.样式名
2.注意：
1）样式值要用引号引起来 如box1.style.height=“100px”;
2）JS修改、读取的样式是内联样式，修改时优先级高于样式表的样式 (样式表就是head里面的style )
3）如果CSS的样式名中含有 -
这种名称在JS中是不合法的比如background-color
需要将这种样式名修改为驼峰命名法，
去掉-，然后将-后的字母大写 ，如backgroundColor
4）如果在样式表中写了 !important
如：background-color: #DE1E26 !important;
则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效
尽量不要为样式添加!important
通过JS获取当前元素的样式
以下两种方法均只读
1.currentStyle
1）只支持IE浏览器，其他的浏览器都不支持
2）语法：元素.currentStyle.样式名
如：alert(box1.currentStyle.width);
3）若未设置width，则返回auto
2.getComputedStyle（）方法
1） 不支持IE8及以下
2） 语法：这个方法是window的方法，可以直接使用
getComputedStyle（参数1，参数2），需要两个参数
第一个：要获取样式的元素名称
第二个：可以传递一个伪元素，一般都传null
3）若未设置width，则返回浏览器此时浏览到的长度
4）该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象.样式名来读取样式
如：alert(getComputedStyle(box1,null).width);
3.定义一个函数，同时兼容IE和其它浏览器
则要注意 要获取的样式需用【】括起来
//定义一个函数来获取指定元素当前的样式
//obj 要获取样式的元素 theName 要获取的样式
function getStyle(obj, theName) {
// var theStyle=getComputedStyle(obj,null).[theName];
// return theStyle;
//return obj.currentStyle[theName];
/***********同时兼容IE和其它浏览器*******************/
if (window.getComputedStyle) {
return getComputedStyle(obj,null)[theName];
}
else {
return obj.currentStyle[theName];
}
}
//return obj.currentStyle[theName];
}
110.其它样式操作（都是只读，不可修改）
具体操作
1.clientWidth、clientHeight
1.获取元素的可见宽度和高度，包括内容区和内边距和滚动条
2.不带px的，返回都是一个数字，可以直接进行计算
2.offsetWidth、offsetHeight： 获取元素的整个的宽度和高度，包括内容区、内边距和边框
offsetLeft 、offsetTop ： 获取元素相对于其定位父元素的水平偏移量 垂直偏移量
offsetParent ： 获取当前元素的定位父元素
即离当前元素最近、开启了定位的祖先元素,若无祖先元素开启定位，则返回body
3.scrollWidth、scrollHeight 获取元素整个滚动区域的宽度和高度
scrollLeft 、scrollTop 可以获取水平滚动条滚动的距离 、垂直滚动条滚动的距离
4.当满足scrollHeight - scrollTop == clientHeight 说明垂直滚动条滚动到底了
(scrollHeight - scrollTop - clientHeight )
满足scrollWidth - scrollLeft == clientWidth 说明水平滚动条滚动到底
注意：
<div id="div3">
<div id="div4"></div>
</div>
1.对div3设置overflow：auto才会有滚动框
2.对div3调用上面的方法才可以
3.scrollTop是小数，且会比实际小一点，导致scrollHeight - scrollTop > clientHeight，则可以用
scrollHeight - scrollTop - clientHeight < 1 来解决
练习——滚动条到底才可以勾选选框
box1.onscroll=function(){
if (box1.scrollHeight - box1.scrollTop - box1.clientHeight < 1) {
input[0].disabled = false;
input[1].disabled = false;
}
else {
input[0].disabled = true;
input[1].disabled = true;
}
}
1.其中onscroll事件，是在滚动条被移动时，才会触发
2.要先在input标签中，设置disabl=“disable”（或者等于true）才可以
112.Div跟随鼠标移动
显示鼠标的坐标
areaDiv.onmousemove = function(event){
/** 在IE8中，响应函数被触发时，浏览器不会传递事件对象，
* 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存*/
/*if(!event){
event = window.event;
}*/
//解决事件对象的兼容性问题
event = event || window.event;
/** clientX可以获取鼠标指针的水平坐标
* cilentY可以获取鼠标指针的垂直坐标*/
var x = event.clientX;
var y = event.clientY;
//在showMsg中显示鼠标的坐标
showMsg.innerHTML = "x = "+x + " , y = "+y;
};
1.clientX和cilentY——>用于获取鼠标在当前的可见窗口的水平坐标、垂直坐标
语法：var x = event.clientX
2.在IE8及以下中，响应函数被触发时，浏览器不会传递事件对象，将事件对象作为window对象的属性保存
3.onmousemove 鼠标移动事件
* - 该事件将会在鼠标在元素中移动时被触发
div跟随鼠标
window.onload = function(){
var box1 = document.getElementById("box1");
//绑定鼠标移动事件
document.onmousemove = function(event){
//解决兼容问题
event = event || window.event;
//获取滚动条滚动的距离
/*这句话并不正确“chrome认为浏览器的滚动条是body的，可用body.scrollTop获取”
通过实践操作，发现document.documentElement.scrollTop均兼容
*火狐、ie等浏览器认为浏览器的滚动条是html的*/
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
//获取到鼠标的坐标 //pageX和pageY
var left = event.clientX;
var top = event.clientY;
//设置div的偏移量
box1.style.left = left + sl + "px";
box1.style.top = top + st + "px";
}
1.鼠标的坐标是以body的左上角为零点。
div的坐标是以当前屏幕的左上角为零点
2.开启box1的绝对定位
position: absolute;
3.“chrome认为浏览器的滚动条是body的，可用body.scrollTop获取”这句话并不正确
通过实践操作，发现document.documentElement.scrollTop均兼容
4.要给body加一个长宽，才会有滚动条
170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
