黑马程序员_PHP_课程同步笔记day11:DOM介绍
【济南中心】PHP课程同步笔记day11: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节点的方法
https://www.360docs.net/doc/878500280.html,stChild
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”)
案例:
//当网页加载完成,调用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");
}
节点操作
createElement()创建节点
语法:var nodeObj = document.createElement(tagName)
appendChild()追加节点
语法:parentNode.appendChild(childNode)
HTMLDOM简介和新特性
核心DOM中,对节点的访问,都是从根节点开始的,访问方式十分麻烦。特别是当节点层次很深时,更是麻烦。因此,才有了HTMLDOM。
1、HTMLDOM的新特性
每一个HTML标记,都对应一个对象。如:标记,就是一个img对象。
每一个HTML标记的属性,与对应的元素对象的属性,一一对应。
属性:src、width、height、border、style、title、id、class等。
在JS中,img对象属性:src、width、height、border、style、title、id、className 等。
代码:
"https://www.360docs.net/doc/878500280.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//网页加载完成后,调用匿名函数
window.onload = function(){
//获取元素对象
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;";
}
2、HTML DOM访问HTML元素的方法
(1)根据元素的id查找对象——document.getElementById(id)
//当网页加载完成,调用JS程序
window.onload = function(){
//获取id = img01的图片对象
var imObj = document.getElementById("img01");
//添加属性
imgObj.src = "images/01.jpg";
imgObj.width = 400;
}
(2)根据HTML标签名找对象
描述:根据HTML标签名找对象
语法:var arr = parentNode.getElementsByT agName(tagName)
参数:
tagName就是要查找的标签名称,不能带尖括号。
parentNode代表上层节点。
返回值:返回一个对象数组。
举例:ulObj.getElementsByTagName(“li”)
//当网页加载完成,调用JS程序
window.onload = init;
function init(){
//获取id = img01的图片对象
var ulObj = document.getElementById("img01");
var arr = ulObj.getElementsByT agName("li");
//循环数组
for(var i=0;i arr[i].style = "color:blue"; arr[i].onmouseover = function(){ this.style.backgroundColor = "yellow"; } arr[i].onmouseout = function(){ this.style.backgroundColor = ""; } } }
- HTML超文本标注语言
- CSS层叠样式表
- JavaScript客户端脚本程序
元素对象的属性
tagName:与nodeName功能一样。
className:与class属性功能一样。
innerHTML:设置或读取某个标记中的所有内容,包括HTML文本。只能用于双边标记。
nodeValue:指纯文本。
offsetWidth:指元素的可见宽度,不含滚动条中的内容。只读属性。不带px单位。 offsetHeight:指元素的可见高度,不含滚动条中的内容。只读属性。不带px单位。 scrollWidth:指元素的总宽度,包含滚动条中的内容。只读属性。不带px单位。
scrollHeight:指元素的总高度,包含滚动条中的内容。只读属性。不带px单位。 scrollTop:当元素出现滚动条时,向下拖动滚动条,内容向上滚动的距离。可读可写属性。不带px单位。
如果该元素没有滚动条,则scrollTop的值为0,该值只能是正值。 scrollLeft:与scrollTop描述一样,只是向左滚动的距离。
事件:onscroll
描述:当拖动滚动条时发生
案例:
代码实现:
var dome;//全局变量
var timer;//定时器变量
//网页加载完成,动画自动开始
window.onload = function(){
//获取三个
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(){
//如果滚动上去的距离,等于任何一个
//则开始下一次滚动
if(dome.scrollTop == dome.offsetHeight){
dome.scrollTop = 0;
}else{
dome.scrollTop++;
}
}