简述DOM的分类和节点间的关系
DOM分类：DOM Core(核心），HTML-DOM和CSS-DOM 节点之间的关系：最上面的节点为根节点，相邻的节点为兄弟节点，上一个节点为父节点，下一个节点为子节点。
简述如何按层次关系访问节点
使用节点属性和element属性。 节点属性
parentNode:返回节点的父节点childNodes:返回字节的点的集合，childNodes[i];firstChild:返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点lastChild:返回节点的最后一个子节点nextSibling:下一个节点previousSibling:上一个节点 element属性firstElementChild:返回节点的第一个子节点lastElementChild:返回节点的最后一个子节点nextElementSibling:下一个节点previousElementSibling:上一个节点
用什么方法获取节点的属性值？
使用getAttribute(“属性名”);或者通过getElmentById和gerElementsByNane也可以获取； 设置属性值可以通过getAttribute(“属性名”,”属性值“）；
style属性和className在改变样式上有什么区别？ 看语法： style属性
HTML元素.style.样式属性=“值” document.getElementById(“titles”).style.color = “#12321”; 设置 id=titles 的字体颜色为”#12321
className属性
HTML元素.className = “样式名称” document.getElementById(“cart”).className =”cartOver”; 个人认为他们只是属性和类的区别，一个是设置样式属性值，一个是设置样式名称，都可以达到同样的效果吧。
1.DOM
DOM：Document Object Model（文档对象模型）
2.节点和节点关系
3.访问节点
(1)使用getElement系列方法访问指定节点
getElementById() getElementsByName() getElementsByTagName()
(2)根据层次关系访问节点
节点属性
(3)element属性
示例
oNext = oParent.nextElementSibling || oParent.nextSibling
oPre = oParent.previousElementSibling || oParent.previousSibling
oFirst = oParent. firstElementChild || oParent.firstChild
oLast = oParent.lastElementChild || oParent.lastChild
访问节点示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>访问节点
</title>
<link rel="stylesheet" href="css/newStyle.css">
</head>
<body>
<section id="news">
<header>京东快报
<a href="#">更多 >
</a></header>
<ul>
<li><a href="#">志玲姐姐：墨镜300减30
</a></li>
<li><a href="#">京东无锡馆正式启动
</a></li>
<li><a href="#">99元抢平板！品牌配件199-100
</a></li>
<li><a href="#">节能领跑京东先行
</a></li>
<li><a href="#">高洁丝实力撩货，领券五折
</a></li>
</ul>
</section>
<script>
var obj=document.getElementById("news");
var str=obj.children[1].children[2].children[0].innerHTML;
var str=obj.children[1].children[2].children[0].firstChild.noceName;
alert(str);
</script>
</body>
</html>
body,ul,li,div,section,header{margin: 0
;padding: 0
;}
ul,li{list-style: none
;}
body{
font-family: "微软雅黑";
font-size: 12px
;
line-height: 28px
;
}
#news{
border: 1px solid #cccccc
;
width: 280px
;
overflow: hidden
;
margin: 5px auto 0 auto
;
}
#news header{
border-bottom: 1px solid #cccccc
;
font-size: 16px
;
line-height: 40px
;
padding-left:15px
;
color: #666666
;
font-weight: bold
;
}
#news header a{text-decoration: none
; color: #666666
; float: right
; padding-right: 10px
; font-size: 12px
;}
#news ul li{padding-left: 10px
;}
#news ul li a{color: #686868
; text-decoration: none
; display: inline-block
;}
#news ul li a:hover{color: #b02f4a
;}
4.节点信息
nodeName：节点名称 nodeValue：节点值 nodeType：节点类型
示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>节点信息
</title>
</head>
<body>
<ul id="nodeList">
<li>nodeName
</li>
<li>nodeValue
</li>
<li>nodeType
</li>
</ul>
<p></p>
<script>
var nodes=document.getElementById("nodeList");
var type1=nodes.firstChild.nodeType;
var type2=nodes.firstChild.firstChild.nodeType;
var name1=nodes.firstChild.firstChild.nodeName;
var str=nodes.firstChild.firstChild.nodeValue;
var con="type1："+type1+"<br/>type2："+type2+"<br/>name1："+name1+"<br/>str："+str;
document.getElementById("nodeList").nextSibling.innerHTML=con;
</script>
</body>
</html>
5.操作节点
(1)操作节点的属性
语法：
getAttribute("属性名")
setAttribute("属性名","属性值")
(2)创建和插入节点
创建节点
(3)删除和替换节点
示例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>删除和替换节点
</title>
<style>
*{padding: 0; margin: 0; font-size: 12px;}
ul,li{list-style: none;}
li{float: left; text-align: center; width: 140px;}
</style>
</head>
<body>
<ul>
<li>
<img src="images/f01.jpg" id="first">
<p>
<input type="button" value="删除我吧" onclick="del()">
</p>
</li>
<li>
<img src="images/f02.jpg" id="second">
<p>
<input type="button" value="换换我吧" onclick="rep()">
</p>
</li>
</ul>
<script>
function del(){
var delNode=document.getElementById("first");
delNode.parentNode.removeChild(delNode);
}
function rep(){
var oldNode=document.getElementById("second");
var newNode=document.createElement("img");
newNode.setAttribute("src","images/f03.jpg");
oldNode.parentNode.replaceChild(newNode,oldNode);
}
</script>
</body>
</html>
(4)操作节点样式
改变样式的属性
style属性
语法：HTML元素.style.样式属性＝"值" 示例： document.getElementById(“titles”).style.color="#ff0000"; document.getElementById(“titles”).style.fontSize="25px ";
className属性
语法：HTML元素.className=“样式名称” 示例： function over(){ document.getElementById(“cart”).className=“cartOver”; document.getElementById(“cartList”).className=“cartListOver”; } function out(){ document.getElementById(“cart”).className=“cartOut”; document.getElementById(“cartList”).className=“cartListOut”; }
(5)获取元素的样式
语法：HTML元素.style.样式属性; 示例：alert(document.getElementById(“cartList”).display);
语法：document.defaultView.getComputedStyle(元素,null).属性; 示例：var cartList=document.getElementById(“cartList”); alert(document.defaultView.getComputedStyle(cartList,null).display);
语法：HTML元素. currentStyle.样式属性; 示例：alert(document.getElementById(“cartList”).currentStyle.display); currentStyle:兼容IE浏览器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选择你喜欢的书
</title>
<style>
*{font-size: 12px; font-family: "Arial", "微软雅黑"; line-height: 25px;}
div{padding: 5px; text-align: center;
}
div span{display: block;}
</style>
</head>
<body>
<p>选择你喜欢的书：
<input type="radio" name="book" onclick="book()">我和狗狗一起活下来
<input type="radio" name="book" onclick="book()">灰霾来了怎么办
</p>
<div><img src="" alt="" id="image" onclick="img()"><span></span></div>
<script>
function book(){
var ele=document.getElementsByName("book");
var img=document.getElementById("image");
if(ele[0].checked){
img.setAttribute("src","images/dog.jpg");
img.setAttribute("alt","我和狗狗一起活下来");
img.nextSibling.innerHTML="我和狗狗一起活下来";
}
else if(ele[1].checked){
img.setAttribute("src","images/mai.jpg");
img.setAttribute("alt","灰霾来了怎么办");
img.nextSibling.innerHTML="灰霾来了怎么办";
}
}
function img(){
var alt=document.getElementById("image").getAttribute("alt");
alert("图片的alt："+alt)
}
</script>
</body>
</html>
6.HTML中元素属性
(1)元素属性应用
7.元素属性应用
语法:
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
或者
document.body.scrollTop;
document.body.scrollLeft;
