本帖最后由 小鲁哥哥 于 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> | 
收藏
淘帖
踩
