FavoriteLoading
0

我的php学习第十五天之dom对象篇

昨日回顾

DOM的概念

W3C的DOM的主要目的:使用程序或脚本可以动态的改变网页的外观、结构、内容。

前台动态网站:一定要结合事件来实现。onload、onscroll、onchange、onsubmit

HTML标记来调用事件,当事件发生时,去执行一项动作。这个动作一般是一个函数。该函数实现一项功能。

客户端脚本:VBScript、JavaScript、ActionScript等

静态网页:HTML+CSS

前台技术:HTML、CSS、JavaScript、jQuery、AJAX、XML等

后台技术:PHP、MySQL、smarty模板引擎、yii、ThinkPHP、OOP编程思想、MVC、 APACHE、Linux、Uninux

 

DOM的分类

核心DOM:提供了一些公共的属性和方法,可以用于操作HTML和XML文档。

HTML DOM:针对HTML文档提供的一些属性方法

XML DOM:针对XML提供的一些属性和方法

CSS DOM:针对操作CSS提供的一些属性方法

Event DOM:可以获取当前鼠标的环境信息,比如: 取得鼠标的坐标

 

HTML节点树

一个HTML文档只有一个根元素;

子节点、父节点、兄弟节点

HTML文档是一种结构化的文档,是一种有一定层级关系的文档。

 

核心DOM的节点操作

firstChild:第一个子节点。访问<body>节点 document.firstChild.lastChild

lastChild:最后一个子节点

childNodes:节点列表,是一个数组。

parentChild:父节点

setAttribute(name,value):给某个元素对象,增加一个属性

removeAttribute(name):删除节点属性

getAttribute(name):取到某个节点的属性的值

createElement(tagName):创建一个节点,创建一个HTML标记

parentNode.appendChild(nodeName):给某个父节点,增加一个子节点

parentNode.insertBefore(newObj,oldObj):将某一个节点插入到另一个节点的前面

HTML DOM的新特性

核心DOM操作网页中的各元素,可以实现动态的HTML。但是,选择某个元素非常麻烦,特是当层级越深时,操作就更麻烦。核心DOM查找元素并不实用。DOM为HTML提供了专用的方法,就是HTML DOM。

HTML DOM的特性

(1)每一个HTML元素(标记),都对应一个元素对象(对象)。任何HTML标记都对应一个元素对象。

(2)每一个HTML元素的属性,都与元素对象属性一一对应。

举例:

<img id=“obj” src=“images/xingxing.gif” />

<script>

Var obj = document.getElementById(“obj”);

obj.src = “images/yueliang.gif”;

obj.title = “图片标题”

obj.style = “width:400px;height:300px;”;

obj.border = 1;

obj.class = “img01”3

</script>

 

HTML DOM访问HTML的方法

(1)使用getElementById()方法

<div id=“box”></div>

var obj = document.getElementById(“box”);

obj.style = “width:400px;height:300px;”

obj.setAttribute(“style”,”width:400px;padding:20px;”);

//给id=box的元素添加一个图片

Var node_img = document.createElement(“img”);

node_img.src = “images/bg.gif”;

obj.appendChild(node_img);

//清除div中所有的内容

obj.innerHTML = “”;

(2)使用getElementsByTagName()方法

含义:取得某一个标记下的所有指定的子标记,返回一个数组类型。

<ul id=“obj”>

<li>北京市</li>

<li>天津市</li>

<li>武汉市</li>

<li>上海市</li>

<li>广州市</li>

</ul>

Var obj = document.getElementById(“obj”);

Var arr = obj.getElementsByTagName(“li”);  //HTML DOM

Var arr = obj.childNodes;  //核心DOM

For(var i=0;i<arr.length;i++)

{

arr[i].style = “color:#0000ff;text-decoration:underline;”;

arr[i].setAttribute(“style”,”color:#0000ff;text-decoratin:underline;”);

}

 

(3)使用name属性

每个HTML标记,都有name属性,一般在表单中使用name来访问。

<form name=“form1” onsubmit=“return checkForm()>

用户名:<input type=“text” name=“username” />

<input type=“submit” value=“提交表单” />

</form>

//对表单中的username进行验证

function checkForm()

{

Var theForm = document.form1;

if( theForm.username.value == “”){

alert(“用户名不能为空”);

return false;

}else if(theForm.username.value.length <5 && theForm.username.value.length > 20)

{

alert(“用户名只能介于5-20之间”);

return false;

}else

{

return true;

}

}

 

元素对象的属性和方法

元素对象就是HTML元素对应的对象,就叫元素对象。

tagName:标记的名称,同nodeName一样。

id:同元素的id属性一样

title:同元素的title属性一样

className:同元素的class属性一样,给元素增加一个类样式

innerHTML:指某个标记中的所有内容,可以包含其它标记。

nodeValue:也指某个文本节点的内容,但只能是纯文本。

offsetWidth:指元素对象的宽度(不含滚动条中的内容)

offsetHeight:指元素对象的高度,里面如果没有内容,则高为0

注意:跟css中的height不太一样,CSS中的height,标记可以没有内容,但height可以设置

offsetHeight必须要有内容,否则高为0.

scrollWidth:包含滚动条中的内容的宽度

scrollHeight:包含滚动条中的内容的高度

scrollTop:指向上滚动过去的距离。

scrollLeft:指向左滚动过去的距离。

offsetTop:指元素距离网页顶端的距离

offsetLeft:指元素距离网页左端的距离

 

onscroll:当滚动条移动时,执行JS程序。

 

CSS DOM

每一个HTML标记,都具有style属性,相应的,每一个元素对象都具有style属性。style属性是一个对象。

CSS DOM就是通过style对象来访问和操作CSS。

<script>

function init()

{

//取得id=box的对象

var obj = document.getElementById(“box”);

//给id=box的对象增加样式

obj.setAttribute(“style”,“width:400px;height:300px;”);  //核心DOM中的方法

obj.style = “width:400px;height:300px;”;  //HTML DOM中的属性

//使用style对象来增加样式

obj.style.width = “400px”;  //给id=box的对象增加一个width的CSS属性

obj.style.height = “300px”; //给id=box的对象增加一个height的CSS属性

obj.style.overflow = “hidden”;  //数据溢出则隐藏

obj.style.border = “1px solid #ff0000”  //增加边框

obj.style.backgroundColor = “#f0f0f0”;  //背景颜色

obj.style.paddingTop = “20px”;  //上填充为20px

//往id=box中添加一个<h2>标记,内容随意,标题的颜色为#FF0000

var str = “<h2 style=’color:#ff0000’>广州传智播客欢迎您</h2>”;

str += “<ul id=’obj_ul’>”;

str += “<li>HTML超文本标注语言</li>”;

str += “<li>CSS层叠样式表</li>”;

str += “</ul>”;

obj.innerHTML = str;  //将str的内容写入到obj对象中

//求出有多少个<li>标记

var obj_ul = document.getElementById(“obj_ul”);

var arr = obj_ul.getElementsByTagName(“li”);

window.alert(“&lt;li&gt;标记的个数为:”+arr.length);

}

</script>

<body onload=“init()”>

<div id=“box”></div>

</body>

 

CSS的属性转成style对象的属性

(1)如果CSS的属性是一个单词,可以直接写,必须为全小写。如:obj.style.width = “400px”

(2)如果CSS的属性是多个单词用横线连接的,在书写时,将“横线”去掉,并且从第二个单词开始,每个单词的首字母要大写。如:obj.style.backgroundColor = “red”

 

综合案例:书讯快递

image001

分析结果:

  • dome的高为260,overflow=hidden
  • dome包含dome1和dome2
  • dome2初始化时为空
  • dome1和dome2的高度都是260
  • dome1的内容和dome2的内容一样
  • 通过dome的scrollTop++来实现向上滚动
  • 循环滚动,需要有定时器
  • 鼠标放上dome,停止滚动,清除定时器
  • 鼠标移出dome,开始滚动,再次调用定时器函数

 

综合案例:购物车

onBlur:当鼠标从文本框中移出时触发一个JS函数。

表格对象的属性

rows:取得表格的所有行,是一个数组。如:table.rows

cells:取得表格行的所有单元格,是一个数组。如:tr.cells

image003

 

欢迎分享本文,转载请保留出处!—重蔚自留地 站长邮箱:951076433@qq.com