我的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元素的属性，都与元素对象的属性一一对应。

举例：

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()方法

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>

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来访问。

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

</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。

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(“<li>标记的个数为：”+arr.length);

}

</script>

</body>

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

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

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

综合案例：书讯快递

分析结果：

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

本文来自投稿，不代表科技代码立场，如若转载，请注明出处https://www.cwhello.com/459.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

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