黑马程序员技术交流社区
标题: 【济南中心】PHP课程同步笔记day07：DOM介绍 [打印本页]
作者: 小鲁哥哥 时间: 2017-4-8 11:12
标题: 【济南中心】PHP课程同步笔记day07：DOM介绍
本帖最后由 小鲁哥哥 于 2017-4-8 11:28 编辑
【济南中心】PHP课程同步笔记day07：DOM介绍
DOM(文本对象模型(Document Object Model))
W3C组织推荐的处理可扩展标志语言的标准编程接口。W3C的DOM，可以使程序或脚本(JS或AS、JScript)，动态的访问或操作文档的内容、结构、样式。
DOM只是一个标准，就是操作网页的标准。而这个标准(模型)在浏览器中，以“对象”的方式实现。
DOM的分类
核心DOM：提供了操作HTML文档(显示)或XML文档(存储数据)的公共的属性和方法。
HTMLDOM：针对HTML文档，提供的专有的属性和方法。
EventDOM：事件DOM，提供了很多的常用事件。
CSSDOM：提供了操作CSS的一个接口。
HTML节点树
DOM中节点的类型：
document文档节点：代表整个网页，document文档节点不对应标记。是访问文档中各元素的起点。
element元素节点：元素节点对应于网页中的各标记。
attribute属性节点：每个元素都有若干个属性。
Text文本节点：文本节点是最底层节点。
核心DOM公共属性和方法
nodeName：节点名称。
nodeValue：节点的值。
firstChild：第一个子节点。
lastChild：最后一个子节点。
parentNode：父节点。
childNodes：子节点列表，是一个数组。
节点访问
查找html节点的方法
document.firstChild
document.documentElement(兼容性较好)
查找body节点的方法
document.firstChild.lastChild
document.body(推荐使用)
节点属性
1、getAttribute()——获取属性的值
描述：获取节点属性的值。
语法：nodeObj.getAttribute(name)
参数：name代表当前节点的某个属性。
举例：var src = imgObj.getAttribute(“src”)
2、setAttribute()——添加属性
描述：给某个节点添加属性。
语法：nodeObj.setAttribute(name,value)
参数：
name代表属性名称。
value代表属性的值。
举例：imgObj.setAttribute(“src” , “images/02.jpg”)
3、removeAttribute()——删除属性
描述：删除某个节点的属性。
语法：nodeObj.removeAttribute(name)
举例：imgObj.removeAttribute(“src”)
案例：
[HTML] 纯文本查看 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
//当网页加载完成，调用JS程序
window.onload = function(){
//查找img节点
var imObj = document.body.firstChild;
//向img节点添加src属性
imgObj.setAttribute("src","images/01.jpg");
//向img节点添加width属性
imgObj.setAttribute("width",400);
//向img节点添加border属性
imgObj.setAttribute("border",2);
//向img节点添加style属性
imgObj.setAttribute("style","padding:20px");
//向img节点添加onclick属性
imgObj.setAttribute("onclick","removeImg(this)");
}
//函数：删除src属性
function removeImg(imgObj){
//删除src属性
imgObj.removeAttribute("src");
imgObj.removeAttribute("width");
}
</script>
</head>
<body>
<img />
</body>
</html>
节点操作
createElement()创建节点
语法：var nodeObj = document.createElement(tagName)
appendChild()追加节点
语法：parentNode.appendChild(childNode)
HTMLDOM简介和新特性
核心DOM中，对节点的访问，都是从根节点开始的，访问方式十分麻烦。特别是当节点层次很深时，更是麻烦。因此，才有了HTMLDOM。
1、HTMLDOM的新特性
每一个HTML标记，都对应一个对象。如：<img>标记，就是一个img对象。
每一个HTML标记的属性，与对应的元素对象的属性，一一对应。
<img>属性：src、width、height、border、style、title、id、class等。
在JS中，img对象属性：src、width、height、border、style、title、id、className等。
代码：
[HTML] 纯文本查看 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
//网页加载完成后，调用匿名函数
window.onload = function(){
//获取<img>元素对象
var imgObj = document.body.firstChild;
//添加imgObj对象属性
//imgObj.setAttribute("src","images/01.jpg");
imgObj.src = "images/01.jpg";
imgObj.width = 400;
imgObj.border = 2;
imgObj.style = "border:5px dotted red;padding:10px;";
}
</script>
</head>
<body>
<img />
</body>
</html>
2、HTML DOM访问HTML元素的方法
（1）根据元素的id查找对象——document.getElementById(id)
[HTML] 纯文本查看 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
//当网页加载完成，调用JS程序
window.onload = function(){
//获取id = img01的图片对象
var imObj = document.getElementById("img01");
//添加属性
imgObj.src = "images/01.jpg";
imgObj.width = 400;
}
</script>
</head>
<body>
<img id="img01"/>
</body>
</html>
(2)根据HTML标签名找对象
描述：根据HTML标签名找对象
语法：var arr = parentNode.getElementsByTagName(tagName)
参数：
tagName就是要查找的标签名称，不能带尖括号。
parentNode代表上层节点。
返回值：返回一个对象数组。
举例：ulObj.getElementsByTagName(“li”)
[HTML] 纯文本查看 复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
//当网页加载完成，调用JS程序
window.onload = init;
function init(){
//获取id = img01的图片对象
var ulObj = document.getElementById("img01");
var arr = ulObj.getElementsByTagName("li");
//循环数组
for(var i=0;i<arr.length;i++){
arr.style = "color:blue";
arr.onmouseover = function(){
this.style.backgroundColor = "yellow";
}
arr.onmouseout = function(){
this.style.backgroundColor = "";
}
}
}
</script>
</head>
<body>
<ul id="u01">
<li>HTML超文本标注语言</li>
<li>CSS层叠样式表</li>
<li>JavaScript客户端脚本程序</li>
</ul>
</body>
</html>
元素对象的属性
tagName：与nodeName功能一样。
className：与class属性功能一样。
innerHTML：设置或读取某个标记中的所有内容，包括HTML文本。只能用于双边标记。
nodeValue：指纯文本。
offsetWidth：指元素的可见宽度，不含滚动条中的内容。只读属性。不带px单位。
offsetHeight：指元素的可见高度，不含滚动条中的内容。只读属性。不带px单位。
scrollWidth：指元素的总宽度，包含滚动条中的内容。只读属性。不带px单位。
scrollHeight：指元素的总高度，包含滚动条中的内容。只读属性。不带px单位。
scrollTop：当元素出现滚动条时，向下拖动滚动条，内容向上滚动的距离。可读可写属性。不带px单位。
如果该元素没有滚动条，则scrollTop的值为0，该值只能是正值。
scrollLeft：与scrollTop描述一样，只是向左滚动的距离。
事件:onscroll
描述：当拖动滚动条时发生
案例：
代码实现：
[JavaScript] 纯文本查看 复制代码
<script type="text/javascript">
var dome;//全局变量
var timer;//定时器变量
//网页加载完成，动画自动开始
window.onload = function(){
//获取三个<div>对象
dome = document.getElementById("dome");
var dome1 = document.getElementById("dome1");
var dome2 = document.getElementById("dome2");
//将dome的高，复制给dome1和dome2
dome1.style.height = dome.offsetHeight+"px";
dome2.style.height = dome.offsetHeight+"px";
//将dome1的内容，复制到dome2中
dome2.innerHTML = dome1.innerHTML;
//鼠标放上停止滚蛋,鼠标移出继续滚动
dome.onmouseover = function(){
//清除定时器
window.clearInterval(timer);
}
dome.onmouseout = function(){
timer = window.setInterval("start2()",40);
}
//定时器
timer = window.setInterval("start2()",40);
}
function start2(){
//如果滚动上去的距离，等于任何一个<div>高度
//则开始下一次滚动
if(dome.scrollTop == dome.offsetHeight){
dome.scrollTop = 0;
}else{
dome.scrollTop++;
}
}
</script>
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
