A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小鲁哥哥 于 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节点树
图片1.png
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>
元素对象的属性
图片2.png
       tagName:与nodeName功能一样。
        className:与class属性功能一样。
        innerHTML:设置或读取某个标记中的所有内容,包括HTML文本。只能用于双边标记。
        nodeValue:指纯文本。
        offsetWidth:指元素的可见宽度,不含滚动条中的内容。只读属性。不带px单位。
        offsetHeight:指元素的可见高度,不含滚动条中的内容。只读属性。不带px单位。
       scrollWidth:指元素的总宽度,包含滚动条中的内容。只读属性。不带px单位。
        scrollHeight:指元素的总高度,包含滚动条中的内容。只读属性。不带px单位。
       scrollTop:当元素出现滚动条时,向下拖动滚动条,内容向上滚动的距离。可读可写属性。不带px单位。
                如果该元素没有滚动条,则scrollTop的值为0,该值只能是正值。
       scrollLeft:与scrollTop描述一样,只是向左滚动的距离。
事件:onscroll
描述:当拖动滚动条时发生
案例:
图片3.png
图片4.png
代码实现:
[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>
锦绣齐鲁.jpg

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马