一DOM
Document Object Model (文档对象模型)
二、获取节点
1》document.getElementById() 选取有id的节点
2》document.getElementsByTagName() 选取节点名称
3》document.getElementsByClassName() 获取有class 节点的
三、Dom树
日常能见到的树：
树的部分：树枝 树干 果实
看不到：树（根）--最主要的
Document --- Html ----head|body------div| p |h1
四、节点 DOM对象
div
P
h1
input
span
……
***************************对象有属性 对象有方法*****************************
var arr = new Array();
arr.length
arr.join()
五、Dom对象（节点）的属性
1》childNodes 返回子节点的一个集合
*************************子节点元素节点、文本节点、属性节点
2》nodeName 返回节点名称 大写 js 严格区分大小写的
3》nodeType 返回数字 （节点类型）
4》firstChild 获取到第一个子元素
5》lastChild 获取到最后一个字元素
6》firstElementChild 获取到第一个元素子节点
7》lastElementChild获取到最后一个元素子节点
8》parentNode 获取到父节点
9》nodeValue 节点文本 必须是文本节点才可以获取值
***************************
注意：在ie8 或以下版本 firstChild 这个属性是获取的第一个元素节点 并且是第一个子元素，而firstElementChild 这个属性，在低版本不认识
*************返回的是1代表元素节点，返回的是3代表文本节点
六、节点的分类
<div id = ‘box’></div> 元素节点
<div id = ‘box’>123</div> 文本节点
<img src=’’ alt=’’/> 属性节点
七、 节点方法
1》getAttribute() 获取属性值
2》setAttribute() 设置属性值
3》removeAttribute() 删除属性值
八、节点的创建
1》创建元素节点
语法：document.createElement(元素名)
2》创建文本节点
语法：document.createTextNode(文本内容)
九、添加节点
1》追加
父元素.appendChild()
2》前置
父元素.insertBefore()
十、删除节点
语法 父元素.removeChild(删除的子元素)
十一、元素样式
box.style.样式名称 ====》只能获取都行内样式
****************************
如何获取样式表中的样式
1》 非IE
getComputedStyle(元素,null).样式名称
2》 IE(8)或IE(8)以下
box.currentStyle.样式名称
十二、元素大小
offsetWidth
offsetHeight
******注意
1》 没有加入单位的（类型：数值number）
2》 计算：
a) 计算边框（border）
b) 计算内边距（padding）
十三、元素偏移
offsetLeft
offsetTop
******注意
1》 没有加入单位的（类型：数值number）
2》 计算：
a) 计算margin
3》 定位
1） 如果没有定位：返回元素距离屏幕左侧（顶部）的偏移量
2） 如果有定位：返回元素左侧（顶部）和定位元素距离的偏移量
scrollTop
scrollLeft
**************滚动的距离
十四、获取宽度和搞定（文档、可视区域）
document.documentElement=文档的文档元素
document.body=文档的body
clientWidth
clientHeight
获取可视区域宽度和高度
十五、标准模式和混杂模式
标准模式 document.documentElement
混杂模式：document.body
兼容处理：
document.body || document.documentElement
//var box = document.getElementById("box");
/*var uls = document.getElementById("uls");
var lis = uls.getElementsByTagName("li");
//var lis = docuemnt.getElementsByTagName("li");
//文档对象 的 所有li元素
//alert(lis)
for(var i = 0 ; i < lis.length; i++){
lis[i].style.background = "red";
}
*/
/*
var lis = document.getElementsByClassName("lis");
alert(lis.length)
for(var i = 0 ; i < lis.length ; i+=){
lis[i].style.background = "orange"
}*/
//封装一个函数 实现可以获取到class 名的节点
//var dom = document.getElementsByTagName("*");//获取到所有的节点的个数
//alert(dom.length)
/*function fn(cName){
//1>把页面上所有的节点都选取到
//2》每一个节点的class 名称和参数cName做比较
//3》如果相等，把节点添加到数组中，
//4》最后返回数组
var dom = document.getElementsByTagName("*");
var arr = [];
for(var i = 0 ; i < dom.length; i++){
if (dom[i].className.indexOf(cName) != -1){
arr.push(dom[i])
}
}
return arr;
}
var lis = fn("lis");
//alert(lis.length);
for(var i = 0 ; i < lis.length ; i ++){
lis[i].style.background = "red"
}
*/
//轮播图js
/*var container = document.getElementById("container"),
left = document.getElementById("left"),
right = document.getElementById("right"),
oul = document.getElementById("oul"),
lis = oul.getElementsByTagName("li"),
ool = document.getElementById("ool"),
ols = ool.getElementsByTagName("li"),
index = -1;
container.onmousemove = function(){
left.style.display = "block";
right.style.display ="block"
}
container.onmouseout= function() {
left.style.display = "none";
right.style.display ="none"
}
left.onclick = function(){
for(var i = 0 ; i < lis.length; i ++){
lis[i].style.display = "none"
ols[i].className = ""
}
index--;
if(index < 0 ){
index = lis.length - 1;
}
lis[index].style.display = "block";
ols[index].className = "active"
}
right.onclick = function (){
for(var i = 0 ; i < lis.length; i ++){
lis[i].style.display = "none"
ols[i].className = ""
}
index++;
if(index > lis.length - 1 ){
index = 0;
}
lis[index].style.display = "block";
ols[index].className = "active"
}
*/
//点击按钮切换
/*for ( var i = 0 ; i < ols.length; i++){
ols[i].onclick = function(){
for(var i = 0 ; i < lis.length; i ++){
lis[i].style.display = "none"
ols[i].className = ""
}
alert(index)
lis[index].style.display = "block";
ols[index].className = "active"
}
}*/
//Dom树
//var box = document.getElementById("box");
//alert(box);//dom对象
//var uls = document.getElementById("uls");
//alert(uls.childNodes.length)
//alert(uls.childNades[0])
//document.write(box.nodeName)
/*for( var i = 0; i < uls.childNodes.length ; i++){
if(uls.childNodes[i].nodeName == "LI"){
uls.childNodes[i].style.background = "red"
}
}*/
/*alert(uls.childNodes[0].nodeType);//返回节点类型元素1 文本3
for(var i = 0 ; i < uls.childNodes.length ; i++){
if(uls.childNodes[i].nodeType == 1){
uls.childNodes[i].style.background = "red"
}
}*/
//节点属性 firstChild lastChild
//var uls = document.getElementById("uls");
//alert(uls.firstChild); // text = uls.childNodes[0]
//alert(uls.lastChild);
//uls.lastChild.style.background= "red";
//alert(uls.parentNode)
//案例
//1》给所有的a 加入onclick 事件
/*var oA = document.getElementsByTagName('a');
for(var i = 0 ; i < oA.length ; i++){
oA[i].onclick = function(){
this.parentNode.style.display = "none";
}
}
*/
/*var box = document.getElementById("box");
//alert(box.innerHTML)
//alert(box.nodeValue);//null
alert(box.childNodes[0].nodeValue)
*/
//节点方法
/*var imgs = document.getElementById("imgs");
//alert( imgs.getAttribute("id"))
var box = document.getElementById("box");
//alert(box.getAttribute("style"))
imgs.setattribute("src","2.png");
imgs.removeAttribute("src");*/
//案例
/*var imgs = document.getElementById("imgs");
function fn(min,max){
var str = Math.random()*(max - min)+min;
return str;
}
setInterval(function(){
imgs.setAttribute("style","width:"+fn(10,100)+"px;position: absolute; left: "+fn(0,1300)+"px;right:"+fn(0,650)+"px")
},500)*/
//创建节点
/*var oDiv = document.createElement("div");
document.body.appendChild(oDiv)//追加节点
var otxt = document.createTextNode("我是box");
var box = document.getElementById("box");
box.appendChild(otxt)*/
/*uls.insertBefore(box)
uls.removeChild(lis[1])*/
//简易留言板
/*var btn = document.getElementById("btn"),
uls = document.getElementById("uls"),
txt = document.getElementById("txt");
btn.onclick = function(){
var lis = document.getElementsByTagName("li");
//创建li元素节点
var oLi = document.createElement("li");
//放入ul元素节点
uls.appendChild(oLi);//追加
// uls.insertBefore(oLi,lis[0]);//前置
// var t = document.createTextNode(txt.value)
//把txt 的value 放入到节点中
// oLi.appendChild(t)
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)
}
}
}
*/
//Dom 元素样式
//var box = document.getElementById("box");
//alert(box.style.width); //只能获取到元素样式
//alert( getComputedStyle(box,null).width ) ;//非IE 获取元素样式 这个是一个方法
//alert( box.currentStyle.width ) ; //IE8或以下版本 这个是属性
//处理兼容
/*function getAttr(dom,value){
if(dom.currentStyle){ // 先IE 判断 再非IE getComputedStyle(dom,null)
return dom.currentStyle[value]
}else{
return getComputedStyle(dom,null)[value]
}
}
alert( getAttr(box,"width") );
*/
//元素大小
/*var box = document.getElementById("box");
//alert(box.offsetWidth);//300 number
//写一个定时器 实现box每隔500毫秒box盒子增加10px
setInterval(function(){
//box.style.width = box.offsetWidth-2+"px";
//302 -2 = 300
//302 -2 = 300
box.style.width = parseInt(getAttr(box,"width")) -1+"px";
},50)
function getAttr(dom,value){
if(dom.currentStyle){
return dom.currentStyle[value] ;//IE
}else{
return getComputedStyle(dom,null)[value];//非IE
}
}
*/
//元素偏移
/*var box = document.getElementById("box");
//alert("left "+box.offsetLeft)
//alert("top "+box.offsetTop)
var dv2 = document.getElementById("dv2");
alert(dv2.offsetLeft)*/
//滚动的距离
/*var btn = document.getElementById("btn");
btn.onclick = function(){
alert(box.scrollLeft)
}
*/
//获取宽度和搞定（文档、可视区域）
//alert(document.documentElement.clientWidth)
//alert( document.body.clientWidth)
//alert(document.documentElement.clientHeight)
//alert(document.body.clientHeight)
//标准模式和混杂模式
var btn = document.getElementById("btn");
btn.onclick = function(){
// alert( document.documentElement.scrollTop);
alert(document.body.scrollTop);
var top = document.body.scrollTop || document.documentElement.scrollTop;
//alert(top)
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--<link rel="stylesheet" href="style.css" />-->
<style>
/**{margin:0;padding: 0;}*/
/*#box{
width:50px;
height:70px;
background:pink;
overflow: scroll;*/
/*border:1px solid #000;
padding:10px;
*/
/*position: relative;
margin: 50px;*/
/*}*/
/*#dv2{
width:100px;
height:100px;
background:red;
margin: 50px;
position: absolute;
left:50px;
top:50px;
}*/
</style>
</head>
<body style="height: 2000px;">
<input type="button" name="btn" id="btn" value="点击" />
<!--<div id="box">
<p>fghjkl;';lkjhgfdertyuiopplnbfr5t6yuj'</p>
<p>fghjkl;';lkjhgfdertyuiopplnbfr5t6yuj'</p>
<p>fghjkl;';lkjhgfdertyuiopplnbfr5t6yuj'</p>
<p>fghjkl;';lkjhgfdertyuiopplnbfr5t6yuj'</p>-->
<!--<div id="dv2"></div>-->
<!--</div>
<input type="button" id="btn" value="滚动" />-->
<script src="script.js"></script>
</body>
</html>
<!--style="background: #000;"-->
<!--轮播图-->
<!-- <div id="container">
<ul id="oul">
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
</ul>
<div id="left"></div>
<div id="right"></div>
<ol id="ool">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>-->
<!--Dom树-->
<!--<div id="box">
<ul id="uls">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>-->
<!--<ul>
<li>1<a href="javascript:;">隐藏</a></li>
<li>2<a href="javascript:;">隐藏</a></li>
<li>3<a href="javascript:;">隐藏</a></li>
<li>4<a href="javascript:;">隐藏</a></li>
<li>5<a href="javascript:;">隐藏</a></li>
</ul>-->
<!--<div id="box">我是box</div>-->
<!--<img src="../04/00.png" id="imgs" />
<div id="box" style="width:300px; height: 300px;margin: 0 auto;"></div>
-->
<!--案例-->
<!--<img src="../04/00.png" id="imgs"/>-->
<!--<div id="box"></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>-->
<!--<h1>简易留言板</h1>
<input type="text" id="txt"/>
<input type="button" value="留言" id="btn" />
<div id="box">
<ul id="uls">
<a href=""
</ul>
</div>-->