php与javascript的区别（PHP学习第十五天JavaScript入门DOM对象）

閉仩眼冋忆

收藏 赞 分享
1.昨日回顾

昨日回顾详细内容文章：→文章链接

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)：将某一个节点插入到另一个节点的前面

2.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>

3.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;

}

}

4.元素对象的属性和方法

元素对象就是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程序。

5.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”

综合案例：书讯快递

php与javascript的区别（PHP学习第十五天JavaScript入门DOM对象）(1)

分析结果：

  • dome的高为260，overflow=hidden

  • dome包含dome1和dome2

  • dome2初始化时为空

  • dome1和dome2的高度都是260

  • dome1的内容和dome2的内容一样

  • 通过dome的scrollTop 来实现向上滚动

  • 循环滚动，需要有定时器

  • 鼠标放上dome，停止滚动，清除定时器

  • 鼠标移出dome，开始滚动，再次调用定时器函数

6.综合案例：购物车

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

表格对象的属性

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

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

php与javascript的区别（PHP学习第十五天JavaScript入门DOM对象）(2)

,
展开全文

免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com

猜您喜欢

    热门推荐

    Copyright © 2013-2024 秒懂生活 站务投诉邮箱：anhduc.ph@yahoo.com

    分享
    投诉
    首页