目录
一.DOM的基本介绍
1.基本概念
①DOM全称为Document Object Model，意为文档对象模型
②是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。
2.DOM的组成
DOM核心：针对任何结构化文档的标准模型。
HTML DOM：针对 HTML 文档的标准模型。
XML DOM：针对 XML 文档的标准模型。
3.DOM树（家族谱）
4.查找 HTML DOM 的元素
getElementById()：可以获取带有ID的元素对象
<div id="myDiv">wonderful life</div>
<script type="text/javascript">
var myDiv = document.getElementById('myDiv');
console.log(myDiv)
</script>
getElementsByTagName():可以返回带有指定标签名的对象集合(因为得到的是一个对象的集合，所以想要操作里面的元素就需要遍历)
getElementsByClassName():可返回带有指定名称的对象的集合(返回的是元素的数组，而不是一个元素)
getElementsByClassName():根据类名返回元素对象集合
querySelector():根据指定选择器返回第一个元素对象( 里面的选择器需要加符号)
querySelectorAll():根据指定选择器返回元素
5.改变 HTML 元素
element.innerHTML ="新的内容" 改变元素的 HTML 内容
element.innerTEXT = "新的内容" 改变元素的文本内容
element.attribute = new value 改变 HTML 元素的属性值
element.setAttribute(属性名, 属性值) 改变 HTML 元素的属性值
element.hasAttribute(属性名) 判断元素是否有该属性
element.removeAttribute(属性名) 删除元素属性
element.style.property = new style 改变 HTML 元素的样式
visibility属性 visible 表示元素是可见的 hidden 表示元素是不可见的
// object.style.visibility="值"
display属性 none 表示此元素不会被显示 block 表示此元素将显示为块级元素，此元素前后会带有换行符
// object.style.display="值"
二.DOM节点操作
1.基本介绍
利用父子兄弟节点关系获取元素
逻辑性强，但兼容性差
2.节点层级
node.parentNode
parentNode属性返回某节点的父节点，是最近的一个父节点
如果指定的节点没有父节点则返回null
parentNode.childNodes( )
返回包括指定节点的子节点的集合（包括了所有的子节点，包括元素节点，文本节点等），该集合为即时更新的集合
parentNode.firstChild（）
返回第一个子节点，找不到就返回null
parentNode.lastChild （）
返回最后一个子元素节点，找不到则返回null
node.nextSibling（）
返回当前元素的下一个兄弟节点，找不到则返回null
node.previousSibling（）
返回当前元素的上一个兄弟节点，找不到则返回null
node.nextElementSibling（）
返回当前元素下一个兄弟元素节点，找不到则返回null
3.节点操作
（1） 创建节点
document.createElement(‘标签名’);
（2） 添加节点
node.appendChild(child)；
node.insertBefore(child,指定元素) 将一个元素添加到一个指定元素的前面
（3）删除节点
node.removeChild(child)； 从DOM中删除一个子节点，返回删除的节点
（4）复制节点（克隆节点）
node.cloneNode（） 返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
①如果括号参数为空或者为false，则是浅拷贝，即只是克隆复制节点本身，不克隆里面的子节点
②如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点
4.表格对象
（1）Table 对象集合
cells 返回包含表格中所有单元格的一个数组
rows 返回包含表格中所有行的一个数组
（2）Table 对象方法
deleteRow() 从表格删除一行
insertRow() 在表格中插入一个新行
td 对象 ：代表了 HTML 中数据单元
th 对象 ：代表了 HTML 标准中的表头单元。
tr 对象 ：代表了 HTML 表格的行。
cells 返回表格行中所有<td>和<th>元素的集合
deleteCell() 删除行中的指定的单元格
insertCell() 在一行中的指定位置插入一个空的元素
三.案例
1.轮播图
//轮播图
var pics = [ //定义一个保存图片的数组
"images/1.jpg",
"images/2.jpg",
"images/3.jpg",
"images/4.jpg",
"images/5.jpg",
"images/6.jpg",
"images/8.jpg",
"images/9.jpg",
"images/10.jpg",
"images/11.jpg"
]
var index = 0; //定义一个变量来控制数组下标
function piccast() { //轮播图的方法
index++; //当执行这个方法的时候，下标增加，图片也随之变化
if (index >= pics.length) {
index = 0; //进行判断，如果下标大于了数组中已有元素的长度，那么就让其重新播放
}
// $("scroll_number_[index]").className = "bchangecolor";
// } else {
var tank = $("dd_scroll"); //拿到图片的存放地
tank.src = pics[index]; //改变图片中的src属性进而进行图片的更换
// $("scroll_number_[index]").className = "achangecolor";
}
function loopShow(i, type) {
var tank = $("dd_scroll"); //拿到图片的存放地
tank.src = pics[i]; //改变图片中的src属性进而进行图片的更换
var myid = $(type.id);
myid.className = "achangecolor";
}
function loopOver(type) {
var myid = $(type.id);
myid.className = "bchangecolor";
}
setInterval("piccast()", 3000);//自动调用
<div class="scroll_mid"> <img src="images/1.jpg" alt="轮换显示的图片广告" id="dd_scroll" width="480"
height="400" />
<div id="scroll_number">
<ul>
<li id="scroll_number_1" onmouseover="loopShow(0,this)" onmouseout="loopOver(this)">1</li>
<li id="scroll_number_2" onmouseover="loopShow(1,this)" onmouseout="loopOver(this)">2</li>
<li id="scroll_number_3" onmouseover="loopShow(2,this)" onmouseout="loopOver(this)">3</li>
<li id="scroll_number_4" onmouseover="loopShow(3,this)" onmouseout="loopOver(this)">4</li>
<li id="scroll_number_5" onmouseover="loopShow(4,this)" onmouseout="loopOver(this)">5</li>
<li id="scroll_number_6" onmouseover="loopShow(5,this)" onmouseout="loopOver(this)">6</li>
<li id="scroll_number_8" onmouseover="loopShow(6,this)" onmouseout="loopOver(this)">7</li>
<li id="scroll_number_9" onmouseover="loopShow(7,this)" onmouseout="loopOver(this)">8</li>
<li id="scroll_number_10" onmouseover="loopShow(8,this)" onmouseout="loopOver(this)">9</li>
<li id="scroll_number_11" onmouseover="loopShow(9,this)" onmouseout="loopOver(this)">10</li>
</ul>
</div>2.选项卡
<style>
.book_type{
float:left;
margin-left:3px;
background-image:url("../images/dd_book_bg1.jpg");
background-repeat:no-repeat;
width:40px;
height:23px;
margin-top:2px;
text-align:center;
cursor:pointer;
}
.book_type_out{
float:left;
margin-left:3px;
background-image:url("../images/dd_book_bg2.jpg");
background-repeat:no-repeat;
width:40px;
height:23px;
margin-top:2px;
text-align:center;
color:#882D00;
font-weight:bold;
cursor:pointer;
}
.book_none{
display:none;
}
.book_show{
display:block;
}
</style>
// 选项卡
var selctcard = [
"history",
"family",
"culture",
"novel"
]
var content = [
"book_history",
"book_family",
"book_culture",
"book_novel"
]
function bookPutUp(myid) {
for (var i = 0; i < selctcard.length; i++) {
var a = selctcard[i];
var b = content[i];
var c = $(a);
var d = $(b);
if (myid == i) {
c.className = "book_type_out";
d.className = "book_show";
} else {
c.className = "book_type";
d.className = "book_none";
}
}
}
<div class="book_sort">
<div class="book_new">
<div class="book_left">最新上架</div>
<div class="book_type" id="history" onmouseover="bookPutUp(0)">历史</div>
<div class="book_type" id="family" onmouseover="bookPutUp(1)">家教</div>
<div class="book_type" id="culture" onmouseover="bookPutUp(2)">文化</div>
<div class="book_type" id="novel" onmouseover="bookPutUp(3)">小说</div>
<div class="book_right"><a href="#">更多>></a></div>
</div>
<div class="book_class" style="height:250px;">
<!--历史-->
<dl id="book_history">
<dt><img src="images/dd_history_1.jpg" alt="history" /></dt>
<dd>
<font class="book_title">《中国时代》（上）</font><br />
作者：师永刚，邹明 主编 <br />
出版社：作家出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥39.00<br />
当当价：￥27.00
</dd>
<dt><img src="images/dd_history_2.jpg" alt="history" /></dt>
<dd>
<font class="book_title">中国历史的屈辱</font><br />
作者：王重旭 著 <br />
出版社：华夏出版社 <br />
<font class="book_publish">出版时间：2009年11月</font><br />
定价：￥26.00<br />
当当价：￥18.20
</dd>
<dt><img src="images/dd_history_3.jpg" alt="history" /></dt>
<dd>
<font class="book_title">《中国时代》（下）</font><br />
作者：师永刚，邹明 主编 <br />
出版社：作家出版社 <br />
<font class="book_publish"> 出版时间：2009年10月</font><br />
定价：￥38.00<br />
当当价：￥26.30
</dd>
<dt><img src="images/dd_history_4.jpg" alt="history" /></dt>
<dd>
<font class="book_title">大家国学十六讲</font><br />
作者：张荫麟，吕思勉 著 <br />
出版社：中国友谊出版公司 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥19.80<br />
当当价：￥13.70
</dd>
</dl>
<!--家教-->
<dl id="book_family" class="book_none">
<dt><img src="images/dd_family_1.jpg" alt="history" /></dt>
<dd>
<font class="book_title">嘿，我知道你</font><br />
作者：兰海 著 <br />
出版社：中国妇女出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.80<br />
当当价：￥17.90
</dd>
<dt><img src="images/dd_family_2.jpg" alt="history" /></dt>
<dd>
<font class="book_title">择业要趁早</font><br />
作者：（美）列文<br />
出版社：海天出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.00<br />
当当价：￥19.30
</dd>
<dt><img src="images/dd_family_3.jpg" alt="history" /></dt>
<dd>
<font class="book_title">爷爷奶奶的“孙子兵法”</font><br />
作者：伏建全 编著 <br />
出版社：地震出版社 <br />
<font class="book_publish"> 出版时间：2009年8月</font><br />
定价：￥28.00<br />
当当价：￥17.40
</dd>
<dt><img src="images/dd_family_4.jpg" alt="history" /></dt>
<dd>
<font class="book_title">1分钟读懂孩子心理</font><br />
作者：海韵 著 <br />
出版社：朝华出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.00<br />
当当价：￥17.40
</dd>
</dl>
<!--文化-->
<dl id="book_culture" class="book_none">
<dt><img src="images/dd_culture_1.jpg" alt="history" /></dt>
<dd>
<font class="book_title">嘿，我知道你</font><br />
作者：兰海 著 <br />
出版社：中国妇女出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.80<br />
当当价：￥17.90
</dd>
<dt><img src="images/dd_culture_2.jpg" alt="history" /></dt>
<dd>
<font class="book_title">择业要趁早</font><br />
作者：（美）列文 <br />
出版社：海天出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.00<br />
当当价：￥19.30
</dd>
<dt><img src="images/dd_culture_3.jpg" alt="history" /></dt>
<dd>
<font class="book_title">爷爷奶奶的“孙子兵法”</font><br />
作者：伏建全 编著 <br />
出版社：地震出版社 <br />
<font class="book_publish"> 出版时间：2009年8月</font><br />
定价：￥28.00<br />
当当价：￥17.40
</dd>
<dt><img src="images/dd_culture_4.jpg" alt="history" /></dt>
<dd>
<font class="book_title">1分钟读懂孩子心理</font><br />
作者：海韵 著 <br />
出版社：朝华出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.00<br />
当当价：￥17.40
</dd>
</dl>
<!--小说-->
<dl id="book_novel" class="book_none">
<dt><img src="images/dd_novel_1.jpg" alt="history" /></dt>
<dd>
<font class="book_title">嘿，我知道你</font><br />
作者：兰海 著 <br />
出版社：中国妇女出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.80<br />
当当价：￥17.90
</dd>
<dt><img src="images/dd_novel_2.jpg" alt="history" /></dt>
<dd>
<font class="book_title">择业要趁早</font><br />
作者：（美）列文 <br />
出版社：海天出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.00<br />
当当价：￥19.30
</dd>
<dt><img src="images/dd_novel_3.jpg" alt="history" /></dt>
<dd>
<font class="book_title">爷爷奶奶的“孙子兵法”</font><br />
作者：伏建全 编著 <br />
出版社：地震出版社 <br />
<font class="book_publish"> 出版时间：2009年8月</font><br />
定价：￥28.00<br />
当当价：￥17.40
</dd>
<dt><img src="images/dd_novel_4.jpg" alt="history" /></dt>
<dd>
<font class="book_title">1分钟读懂孩子心理</font><br />
作者：海韵 著 <br />
出版社：朝华出版社 <br />
<font class="book_publish">出版时间：2009年10月</font><br />
定价：￥28.00<br />
当当价：￥17.40
</dd>
</dl>
</div>
31
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
