Html页面Dom对象之Document
2014-07-30 16:35
295 查看
Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。
Document 对象集合
集合 | 描述 |
---|---|
all[] | 提供对文档中所有 HTML 元素的访问。 |
anchors[] | 返回对文档中所有 Anchor 对象的引用。 |
applets | 返回对文档中所有 Applet 对象的引用。 |
forms[] | 返回对文档中所有 Form 对象引用。 |
images[] | 返回对文档中所有 Image 对象引用。 |
links[] | 返回对文档中所有 Area 和 Link 对象引用。 |
Document 对象属性
属性 | 描述 |
---|---|
body | 提供对 <body> 元素的直接访问。 对于定义了框架集的文档,该属性引用最外层的 <frameset>。 |
cookie | 设置或返回与当前文档有关的所有 cookie。 |
domain | 返回当前文档的域名。 |
lastModified | 返回文档被最后修改的日期和时间。 |
referrer | 返回载入当前文档的文档的 URL。 |
title | 返回当前文档的标题。 |
URL | 返回当前文档的 URL。 |
Document 对象方法
方法 | 描述 |
---|---|
close() | 关闭用 document.open() 方法打开的输出流,并显示选定的数据。 |
getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
getElementsByName() | 返回带有指定名称的对象集合。 |
getElementsByTagName() | 返回带有指定标签名的对象集合。 |
open() | 打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。 |
write() | 向文档写 HTML 表达式 或 JavaScript 代码。 |
writeln() | 等同于 write() 方法,不同的是在每个表达式之后写一个换行符。 |
---->文档对象模型
二WEB页面的html文档,document就是根节点。其他的子对象就是子节点
三节点类型 (1)元素节点 例子:<input>
(2)文本节点 例子:尚晓飞 文本节点
(3)属性节点 例子:<input type="shang"/> shang 就是属性节点
四获取元素节点的方法
【1】直接获取节点:
(1)获取指定的id属性指定值的节点-->唯一
var name=document.getElementById("uname");
(2)获取指定的name属性值的节点--->返回的是一组
var ad=document.getElementsByName("unameName");
(3)获取指定元素名的节点--->返回的是一组
var aaa=document.getElementsByTagName("input");
【2】间接获取节点
(1)通过父节点,获取子节点。
//获取父节点
var father=document.getElementById("showDiv");
//获取该父节点的子节点node集合
var sonarray=father.childNodes;
alert(array[2].nodeValue);
(2)通过字节点,获取父节点
//通过子节点,获取父节点
var son=document.getElementById("a");
var fathera=son.parentNode;
alert(fathera.id);
(3)通过兄弟节点,获取节点
//兄弟节点
var borther2=document.getElementById("realname");
var borther1=borther2.previousSibling;//上一个兄弟节点
var borther3=borther2.nextSibling;//下一个兄弟节点
while(borther1.nodeType!=1){
borther1=borther1.previousSibling;
}
alert(borther1.value);
注意:节点的三个属性 ---->nodeName
----->nodeValue
----->nodeType
四:处理属性节点
(1)元素节点.属性----->获取属性值,也可以为属性重新赋值
(2)getAttribute(key)--->获取key属性的值
setAttribute(key,value)--->为该节点设置属性,及属性的值
五:处理文本节点
(1)获取一个节点内的文本,一般使用innerHtml
(2)innerHtml不局限操作一个节点,而是可以使用Html片段直接填充页面,或直接获取Html片段。大大提高开发的灵活性
例子: function innerhtml(){
alert(document.getElementById("showDiv").innerHTML);
}
六 改变文档的层次结构
(1)创建元素节点document.creatElement
var input=document.createElement("input");
input.type="text";
input.id="123";
input.value="天下无双";
(2)通过父节点,添加到父节点里。parentNode.appendChild
var father=document.getElementById("showDiv");
father.appendChild(input);
(3)插入节点 parentNode.insertBefore(newnode,beforenode)
var ab=document.getElementById("a");
father.insertBefore(input,ab);
(4)覆盖节点 parentNode.replaceChild(newnode,oldnode)
旧节点必须存在,否则发生异常
father.replaceChild(input,ab);
(5)移除某个节点parentNode.removeChild(childNode)
father.removeChild(ab)
相关文章推荐
- html页面的三个width: document, window, screen
- Html页面Dom对象之Element
- 静态页面HTML绑定动态数据.aspx,用document.write的方法!
- Html页面Dom对象之Event
- html判断当前页面是否在iframe中/顶级document中
- 【小白】javascript中的“文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖”
- jquery的常用操作(操作html页面的Dom对象的元素)
- Html页面浏览器工具类功能:document.execCommand()解析
- Ajax抓取页面将html转为dom对象并且获取对象内部的元素
- document.oncontextmenu页面右键菜单功能(2008-09-04 17:49:31| 分类: jsp+html+js+Ajax)
- 如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖
- jquery 渲染 html() text() val() document.write() 和ajax实现页面跳转
- Asp.net动态生成html页面
- html教程(一) 页面(PAGE)标记(TAGS)
- 后台遍历一个HTML页面
- 很高兴,成功将DVBBS模拟成静态HTML页面
- Asp.net动态生成html页面
- Asp.net动态生成html页面
- 在HTML页面中嵌入XML数据
- Servlet学习笔记(三)-----用HTML页面访问Servlet