第五章 DOM
-
DOM是”Document Object Model“(文档对象模型)的首字母缩写。
-
-
顶层对象是bom
-
-
用户定义对象（user-defined object）：由程序员自行创建的对象。
-
内建对象（native object）:内建的Javascript语言中的对象，如Array、Math和Date等。
-
宿主对象（host object）:由浏览器提供的对象，比如window对象
-
DOM中的“M”代表着“Model”(模型)---家谱树模型也非常适用用来表示一份用HTML语言编写出来的文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class list</title>
</head>
<body>
<h2>你要买什么课程？</h2>
<p title='请您选择购买的课程'>本课程是web全栈课程，期待你的购买！</p>
<ul id='classList'>
<li class='item'>JavaScript</li>
<li class='item'>css</li>
<li>DOM</li>
</ul>
</body>
</html>
-
-
元素节点：在刚才上述的“课程列表”的文档时，像body\p\ul 之类的元素这些我们都称为叫元素节点（element node）。如果把web上的文档比作一座楼，元素就是建造这座楼的砖块，这些元素在文档中的布局形成了文档的结构。
-
<p title='请您选择购买的课程'>本课程是web全栈课程，期待你的购买！</p>。由此可见，<p>元素包含着文本"本课程是web全栈课程，期待你的购买！"。
它是一个文本节点(text node)
- 属性节点：元素都或多或少的有一些属性，属性的作用是对元素做出更具体的描述。因为属性总是被放在起始标签里，所以属性节点总是被包含在元素节点当中。并非所属地额元素都包含着属性，但所有的属性都会被包含在元素里。
<p title='请您选择购买的课程'>本课程是web全栈课程，期待你的购买！</p> 在DOM中，title='请您选择购买的课程'是一个属性节点（attribute node）
#通过id获取单个节点对象 document.getElementById(); var box = document.getElementById('box'); console.log(box); #获取当前节点对象 console.dir(box);#获取节点对象的属性方法 #通过标签名获取节点对象 document.getElementsByTagName(); document.getElementsByTagName(); var box2 = ocument.getElementById('div'); console.log(box2); 获取出来的是伪数组 var lis = ocument.getElementById('li'); for (var i =0;i < lis.length;i++){ console.log(lis[i]); } #通过类名获取节点对象 document.getElementsByClassName('类名');
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul li{
color: black;
}
ul li.active{
color: red;
}
</style>
</head>
<body>
<div id="box">MJJ</div>
<ul id="box2">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
// 1.通过id获取单个节点对象
/* var box = document.getElementById('box');
console.log(box);
console.dir(box);
// 2.通过标签名来获取节点对象
var box2 = document.getElementsByTagName('div');
console.log(box2);
var lis = document.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++){
// lis[i].className = 'active';
lis[i].onclick = function(){
// this指向了绑定onclick的那个对象
// 排他思想
for(var j = 0; j < lis.length; j++){
lis[j].className = '';
}
this.className = 'active';
}
}
// 3.通过类名获取
var lis2 = document.getElementsByClassName('active'); */
// console.log(lis2);
var box = document.getElementById('box2');
console.log(box.children);
</script>
</body>
</html>
box.style.color
box.style.backgroundColor
box.style.width
....
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box">mjj</div>
<script type="text/javascript">
// 1.获取事件源对象
var box = document.getElementById('box');
// 2.绑定事件
/* box.onmouseover = function (){
// 3.让标签的背景色变绿
box.style.backgroundColor = 'green';
box.style.fontSize = '30px';
}
box.onmouseout = function (){
// 3.让标签的背景色变绿
box.style.backgroundColor = 'red';
box.style.fontSize = '16px';
} */
var isRed = true;
box.onclick = function(){
if(isRed){
this.style.backgroundColor = 'green';
isRed = false;
}else{
this.style.backgroundColor = 'red';
isRed = true;
}
}
</script>
</body>
</html>
setAttribute(name,value);添加
getAttribute(name); 得到
设置样式
obj.style. 样式
设置属性
obj.setAttribute(name,value);
obj.getAttribute(name);
obj.className 设置类名
obj.title 设置标题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.a{
color: red;
font-size: 30px;
}
p.active{
color: blue;
}
</style>
</head>
<body>
<p title="我的班级" id="p1" class="a">21</p>
<script type="text/javascript">
// 如果是自定义的属性,要在文档上能看到,通过setAttribute设置属性
var p1 = document.getElementById('p1');
/* console.log(p1.getAttribute('title'));
console.log(p1.getAttribute('class'));
p1.setAttribute('class','abc');
p1.setAttribute('adadad','1321313'); */
console.log(p1.className);
console.log(p1.title);
p1.abc = 123;
console.dir(p1);
p1.onclick = function(){
this.className = this.className +' active';
}
</script>
</body>
</html>
onclick 单击事件
onmouseover() 鼠标悬浮事件
onmouseout() 鼠标悬浮离开事件
document.createElement();创建节点
.appendChile(需要追加的节点); 追加节点
.insertBefore(新的节点，在哪个节点插入)；在什么节点之前添加
.removeChild(需要删除的节点)； 删除节点removeChild()方法从子节点列表中删除某个节点。如果删除成功，此方法可返回被删除的节点，如失败，则返回NULL
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="box">
</ul>
<script type="text/javascript">
var ul = document.getElementById('box');
// 创建节点
var li1 = document.createElement('li');
var li2 = document.createElement('li');
// innerText 只设置文本
// li1.innerText = '<a href="#">123</a>';
li1.innerHTML = '<a href="#">123</a>';
li1.setAttribute('class','active');
console.log(li1.children);
li1.children[0].style.color = 'red';
li1.children[0].style.fontSize = '20px';
ul.appendChild(li1);
li2.innerHTML = '第一个';
ul.insertBefore(li2,li1);
ul.removeChild(li2);
</script>
</body>
</html>
例题 图片切换，一共五张图片
<body>
<img src='images/1.jpg' id='imgbox' width=200 heigh=200>
<br>
<button id='prev'>
上一张
</button>
<button id='next'>
下一张
</button>
<script type='text/javascript'>
var imgbox = document.getElementByID('imgbox');
var nextbtn = document.getElemnetById('next');
var prevbtn = document.getElemnetById('prev');
var mixindex = 1;maxindex=5;currentindex=minindex;
nextbtn.onclick=function(){
if (currentindex ===maxindex){
currentindex = mixindex;
}else{
currentindex ++;
}
imgbox.setAttribute('src','images/${currentindex}.jpg')
}
prevtbtn.onclick=function(){
if (currentindex ===mixindex){
currentindex = maxindex;
}else{
currentindex --;
}
imgbox.setAttribute('src','images/${currentindex}.jpg')
}
</script>
</body>
