DOM
document object model（文档对象模型）
获取节点
1.doucment.getElementById()===> 选取有Id节点
2.document.getElementsByTagName()===》选取节点名称
3.document.getElementsByClassName() ===》获取有class节点
Dom树
日常能见到的树：
树的部分：树枝、树干、果实....
看不到：树（根）===》最主要的东西
html--->head|body---->div|p|h1....
document文档中的老大哥
document---> html--->head|body---->div|p|h1....
节点 : DOM "对象"
div
p
h1
input
span....
DOM对象（节点）的属性
语法：
DOM对象.属性名称
1>childNodes : 返回所有"子节点"的一个集合
****子节点(元素节点、文本节点、属性节点)
2>nodeName:返回节点名称
*****(大写)
3>nodeType：返回数字（节点类型）
***返回的是：1 ===》代表元素节点
返回的是：3===》代表文本节点
节点的分类
<div id="box"></div> : 元素节点
<div id="box">123</div> : (123)文本节点
<img src="" alt="" title="">：属性节点
节点属性
firstChild：获取到第一个子元素
lastChild：获取到最后一个子元素
firstElementChild：获取到第一个元素节点（子元素）
lastElementChild：获取到最后一个元素节点（子元素）
parentNode ：获取到父节点
nodeValue：文本节点的值
注意：在IE8或者8以下版本
firstChild这个属性，是获取到第一个元素节点（子元素）
firsteElementChild这个属性，在低级版本不认识
节点方法
getAttribute() :获取属性值
setAttribute() :设置属性值
removeAttribute() : 删除属性
创建节点
1.创建元素节点
语法：document.createElement(节点名称)
2.创建文本节点
语法：document.createTextNode(内容)
添加节点
1.追加
语法：父元素.appendChild(追加的子元素)
2.前置
语法：父元素.insertBefor(添加的内容,添加到谁前面)
删除节点
语法：父元素.removeChild(删除的元素==>子元素)
元素样式
box.style.样式名称 ===》只能获取到行内样式
********如何获取到样式表中的样式******
1》非IE:
getComputedStyle(元素,null).样式名称
2》IE:
元素.currentStyle. 样式
元素大小
offsetWidth
offsetHeight
**注意：
1》 没有加入单位的（类型：数值number）
2》计算：
a)计算边框（border）
b)计算内边距(padding)
元素偏移
offsetLeft
offsetTop
**注意：
1》没有加入单位的（类型：数值number）
2》计算：
a)计算margin
3》定位的关系
1》如果没有定位,返回元素左侧距离浏览器左侧的偏移量 scrollTop
2》如果有定位.返回元素左侧距离和定义元素距离的偏移量 scrollLeft
获取宽度和高度(文档、可视区域)
a)document.documentElement ===》文档 的 文档元素
b)document.body ===》文档 的 body
获取可视区域宽度和高度
clientWidth
clientHeight
二、标准模式和混杂模式
标准模式：document.documentElement
混杂模式：document.body
兼容处理
document.body || document.documentElement
案例 DOM 图片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{margin: 0;padding: 0;}
#container{
width: 520px;
height: 280px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
ul,ol{
list-style: none;
}
ul li {
float: left;
width: 520px;
height: 280px;
}
#container div{
width: 30px;
height: 60px;
opacity: 0.5;
background-color: #ccc;
line-height: 60px;
position: absolute;
font-size: 30px;
text-align: center;
top: 110px;
display: none;
}
#left{
left: 0;
}
#right{
right: 0;
}
ol{
position: absolute;
bottom: 20px;
left:197.5px;
}
ol li{
width: 20px;
height: 20px;
border-radius: 100%;
background-color: #ffffff;
float: left;
margin-left: 5px;
}
.bg{
background-color: red;
}
</style>
<body>
<div id="container">
<ul id="uls">
<li><img src="imgs/1.webp" alt=""></li>
<li><img src="imgs/2.jpg" alt=""></li>
<li><img src="imgs/3.jpg" alt=""></li>
<li><img src="imgs/4.jpg" alt=""></li>
<li><img src="imgs/5.jpg" alt=""></li>
</ul>
<div id="left"> < </div>
<div id="right"> > </div>
<ol id="ols">
<li class="bg"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
</html>
<script src="01.js"></script>
var container = document.getElementById("container"),
left = document.getElementById("left"),
right = document.getElementById("right"),
uls = document.getElementById("uls"),
lis = uls.getElementsByTagName("li"),
ols = document.getElementById("ols"),
lis1 = ols.getElementsByTagName("li"),
index = 0;
container.onmouseover = function(){
left.style.display = "block";
right.style.display = "block";
}
container.onmouseout = function(){
left.style.display = "none";
right.style.display = "none";
}
right.onclick = function(){
for(var i=0;i<lis.length;i++){
lis[i].style.display = "none";
lis1[i].className = "";
}
index++;
if (index>lis.length-1){
index=0;
}
lis[index].style.display = "block";
lis1[index].className = "bg";
}
left.onclick = function(){
for(var i=0;i<lis.length;i++){
lis[i].style.display = "none";
lis1[i].className = "";
}
index--;
if (index<0){
index=lis.length-1;
}
lis[index].style.display = "block";
lis1[index].className = "bg";
}
留言板功能
var uls = document.getElementById("uls"),
btn = document.getElementById("btn"),
txt = document.getElementById("txt");
btn.onclick = function(){
var lis = document.getElementById("li");
var oLi = document.createElement("li");
uls.appendChild(oLi);
oLi.style.listStyle = "none";
oLi.innerHTML = txt.value +"<a href ='javascript:;'> 删除</a>";
var oA =document.getElementsByTagName("a")
for(var i=0;i<oA.length;i++){
oA[i].onclick = function(){
uls.removeChild(this.parentNode);
}
}
}
w3c
HTML DOM Document 对象
HTML DOM 元素对象
HTML DOM 属性对象
HTML DOM 事件对象
