javascript(五)Document对象与DOM
来源:互联网 发布:应用商店排名优化 编辑:程序博客网 时间:2024/05/16 10:37
5.1概念
1)Document对象:每个载入浏览器的HTML文档都会成为Document对象。
①通过使用Document对象,可以从脚本中对HTML页面中的所有元素进行访问(操作文档中的任何内容,都过Document)。
②Document对象是window对象的一部分,可通过window.document方式对其进行访问。
2)DOM:Document Object Model,文档对象模型,HTML文档中的所有节点组成了一个文档树(或节点树)。
①树起始于文档节点,Document对象是一颗文档树的根。
②HTML文档中的每个元素、属性、文本等都代表这树中的一个节点。
5.2根据元素ID查找节点
1)方法:document.getElementById(idValue)
2)忽略文档的结构,通过指定的ID来返回元素节点。
3)可以查找整个HTML文档中的任何HTML元素。
注意事项:如果ID值错误,则返回null。
5.3根据层次查找节点
1)遵循文档的层次结构,查找单个节点:parentNode、firstChild、lastChild
2)遵循文档的层次结构,查找多个节点:
childNodes:以s结尾的都是数组,则有length属性。
3)案例
eg:根据层次查找节点
a
b
c
var sObj=document.getElementById(“sell”); alert(sObj.childNodes.length);//7?为何是7?!
var s1=sObj.firstChild; alert(s1.innerHTML);//undefined?这又为何为未定义?
解释:childNodes会找到sell下的所有子节点,除了真正的子节点外,还有空格这种特殊节点,所以长度为7。只有不空格,都写一行结果才为3,如:
abc
同理,第一个子节点为空格,firstChild的内容当然也就是undefined了。
5.4根据标签名称查找节点
1)getElementsByTagName(“namestr”):在某个节点的所有后代里查找某种类型的元素(根据指定的标签名),并返回所有的元素(返回一个节点列表)。
①忽略文档的结构,查找整个HTML文档中的所有元素。
②如果标签名错误,则返回长度为0的节点列表。
注意事项:单词Elements结尾有s,所以为数组。
2)length属性:返回的是一个节点列表,是个数组,因此可用length属性获取元素个数。使用[index]可定位具体的元素。例如:
文本
一周畅销榜
var spans=document.getElementsByTagName(“span”);
alert(spans.length);//2 alert(spans[1].innerHTML);//榜
5.5读取或者修改节点信息
1)规则一:将HTML标签对象化,操作前先明确被对象化的标签都有什么属性。
如:aObj代表一个元素,有aObj.href属性,但没有aObj.value和aObj.src
2)规则二:innerHTML:设置或获取位于对象起始和结束标签内的内容。
如:aObj.innerHTML可修改元素标签中的“元素”两字
注意事项:单标签无法用innerHTML修改内容。
3)规则三:nodeName:得到某个元素节点和属性节点(即可得到标签或属性名称)及其类型位置。xxx.nodeName:当未知节点类型时,使用该属性获得节点的名称,全大写方式。
如:if(xxx.nodeName == “IMG”) xxx.src = “http://…”;
4)节点属性:getAttribute()方法:根据属性名称获取属性的值。
将HTML标签、属性、CSS样式都对象化。
5.6修改节点的样式
1)style属性:语法:node.style.color; node.style.fontSize
注意事项:CSS样式中属性名内有“-”的,这里省略,并把后面单词首字母大写!
2)className属性:语法:var Obj=document.getElementById(“p1”);
如:Obj.className=”样式类名称”;//可用于设置不同的样式。
5.7查找并修改节点
1)使用getElementById()方法找到元素节点。
2)修改元素内容:innerHTML
3)修改样式:style属性或className属性
4)修改属性:html属性
5.8三个案例
eg1:表单验证 Name: 3-5个小写字母
Age: 2位数字
function validName(){//验证用户名
var name = document.getElementById(“txtName”).value;//得到录入的用户名
var r = /^[a-z]{3,5}/;//验证
if(r.test(name))//根据验证结果显示不同的样式
document.getElementById(“nameInfo”).className = “success”;
else
document.getElementById(“nameInfo”).className = “fail”;
return r.test(name);//添加返回 }
function validAge(){//验证年龄
var age = document.getElementById(“txtAge”).value;//得到录入的年龄
var r = /^[0-9]{2}/;//验证
if(r.test(age))//根据验证结果显示不同的样式
document.getElementById(“ageInfo”).className = “success”;
else
document.getElementById(“ageInfo”).className = “fail”;
return r.test(age);//添加返回 }
function validDatas(){//验证所有数据,验证name和age,return true和false
var r1 = validName(); var r2 = validAge(); return r1&&r2 }
注意事项:onclick=”return validDatas();返回值为true则提交表单,否则取消提交,即为return false时取消某事件。
eg2:读取或修改节点信息
h2文本
段落文本
h2.style1{ border-top:1px solid red; border-right:2px solid blue; }
function testDocument(){ var imgObj = document.getElementById(“img1”);
imgObj.src = “ok.png”;//修改图片
//修改段落:字体颜色,背景色,字体大小,段落文本
var pObj = document.getElementById(“p1”);
pObj.style.color = “red”;//注:pObj.style = “color:red”;不够对象化
pObj.style.backgroundColor = “silver”;
//注:pObj.style.background-color 不认识减号,去掉减号,下个单词首字母大即可。
pObj.style.fontSize = “25”;//单位由浏览器的默认值决定
pObj.innerHTML = “new text”;
//修改某元素的样式:样式复杂时用
document.getElementById(“h2”).className = “style1”;
//复杂样式先定义一个样式类h2.style1{}(定义在内部样式或外部样式都可以),再用
className操作,不能用class,被系统用了。正常情况是标签中直接写class=”style1”,但为了实现动态效果而使用className进行操作。 }
eg3:购物车 价格数量小计 10.00 10.00 20.00 20.00 总计:00.00
function add(btnObj){//增加购物的数量
var tdObj = btnObj.parentNode;//得到当前按钮所在的td
for(var i=0;i
- javascript(五)Document对象与DOM
- javascript.dom-document对象
- Javascript的document,window对象(DOM)
- Javascript的document,window对象(DOM)
- 35-JavaScript-DOM-document对象
- javaScript学习之HTML DOM Document对象
- Javascript之DOM(Document对象)1
- Javascript之DOM(Document对象2)
- JavaScript-DOM对象(Document Object Model)
- JavaScript HTML DOM节点类型之Document类型(Document对象属性和Document对象集合属性)
- JavaScript入门<3>JS外置对象:Window、Document对象与DOM实例详解
- 21天学通JavaScript读书笔记 (五)Screen、Navigator、Document对象
- 跟我学JavaScript--HTML DOM --DOM实例--document对象
- HTML DOM Event 对象(Document 对象)
- JavaScript一起学之五:详解“0级DOM”——Document对象的属性和方法
- 快速学习js 笔记五 dom对象 document
- JavaScript DOM(二)之Document类型
- JavaScript-DOM(document object model)
- 用类创建二叉搜索树
- Windows Phone 10(Lumia 920)升级记录——2
- hdu 2089
- DNS快速配置
- .Net加密与解密——非对称加密之数字签名
- javascript(五)Document对象与DOM
- MATLAB矩阵运算
- 双向同步时撤销重做设计思路
- ASP.Net开发回顾路线
- Nginx的一些基本功能极速入门
- 为什么要使用类别Category
- 鼠标右击会出现转圈圈(大概持续两秒钟)的情况,本文提供解决方案
- 第九周上机项目4 我的向量类
- 梯度下降算法