Javascript学习8 - 脚本化文档(Document对象)
原文:Javascript学习8 - 脚本化文档(Document对象)
每个Web浏览器窗口(或帧)显示一个HTML文档，表示这个窗口的Window对象有一个document属性，它引用了一个Document对象。
一个文档对象模型或者说DOM就是一个API，它定义了如何访问组成一个文档的对象。W3C定义了一个标准的DOM，使用Document API,可以作用于HTML和XML文档的通用功能，添加特定于HTML的属性和方法。
Document对象的详细属性可以见：http://www.w3school.com.cn/htmldom/dom_obj_document.asp
8.1 Document属性
cookie : 允许Javascript程序读写HTTP cookie.
lastModfied : 一个字符串，包含文档修改日期
location : 等价于ＵＲＬ，已经废弃。
referrer : 文档URL，包含把浏览器带到当前文档的链接。
title : 文档标记<title>之间的文本。
URL : 一个字符串，声明装载文档的URL。
8.2 文档对象集合 【遗留DOM】
anchors[] : 文档中所有的锚
applets[] : 代表文档中的Java applet
forms[] : 代表文档中的form元素。
images[] : 所有<img>元素的集合
links[] : 所有超链接Link对象
以上这些称之为遗留DOM集合，它们可以脚本化，但是，它们不能改变文档的结构。可以查看并修改链接的目标地址，从表单元素读取和写入值，但是，无法改变文档相互的结构。
8.3 命名document对象
一般来说，可以使用基于数字来索引文档对象集合元素，但是，基于位置索引不稳定，小的文档改变顺序可以破坏代码。
所以，可以为文档元素分配名字，通过名字来引用这些元素。
例如，以下form元素的访问：
<form name="f1">....</form>
可以这样访问：
document.forms[0]
也可以这样：
document.forms.f1 或者 document.forms["f1"]
有以下表单
<form name="shipping"> <input type="text" name="zipcode"> </form>
可以做以访问：
document.forms[].elements[]document.shipping.zipcode
8.4 Document对象上的事件句柄
在HTML中，把函数赋予一个事件句柄属性来定义它们，以下的HTML代码加下事件句柄：
<form name="myform" onsubmit="return validateform();">...</form>
除了在onsubmit中加入javascript函数外，也可以在JS中直接把函数赋予事件句柄属性
document.myform.onsubmit = validateform; //注意，不是调用函数，不需要()
8.5 W3C DOM 节点
W3C DOM 取代了遗留DOM，强大而标准化，在介绍DOM之前，有一些预备知识：
①需要把文档表示为树
HTML文档在DOM中表示为对象的一棵树，树中有各种各样的节点，节点之上的节点是父节点(parent),直接位于一个节点下层的节点是子节点(children).位于同一层次的节点是兄弟节点(sibling).一个节点的下一个层次节点的集合是那个节点的扣代(descentdant).一个节点的父节点、祖父节点及其它所有位于其它的节点集合是那个节点的祖先(ancestor)
②节点Node
一个节点表示为一个Node接口,Node接口定义了遍历和操作树的属性和方法。
Node.childNodes 返回节点的孩子集合
Node.firstChild,lastChild,nextSibling,previousSibling,parentNode 属性提供了遍历节点的树的一种方法
Node.appendChild(), removeChild(),replaceChild(),insertBefore() 这些方法能够向一个文档树中添加节点或者移动节点。
③节点的类型
每个Node对象都有一个nodeType属性，它指定了节点是什么类型。
常见节点类型：
Element Node.ELEMENT_NODE 1
Text Node.TEXT_NODE 3
Document Node.DOCUMENT_NODE 9
Comment Node.COMMENT_NODE 8
DocumentFragment Node.DOCUMENT_FRAGMENT_NODE 11
Attr Node.ATTRIBUTE_NODE 2
DOM树部的Node是一个Document对象，这个对象的documentElemtn属性引用一个Element对象，它代表了文档的根元素。对于HTML文档，这是<html>标记。
在一个DOM树中只有一个Document对象，DOM树的大部分节点是表示标记的Element对象和表示文本串的Text对象。
DOM API的部门类分层图见15-2
④属性
用Element接口的getAttribute()方法、SetAttribute()方法和RemoveAttribute()方法可以获得、增加、删除一个元素的属性(如img的src属性和width属性)
8.6 DOM HTML API
HTMLDocument是HTML专有的Document接口的子接子。HTMLElement是HTML专有的Element接口的子接口。另外，DOM为许多HTML元素定义了标记专有的接口，如HTMLBodyElement、HTMLTitleElement、HTMLInputElement...这些标记专有的接口通常定义了HTML标记属性的属性集合。
● HTMLDocument接口定义了支持各种文档的属性和方法，包括location、forms[]数组、write()方法
● HTMLElement接口定义了id,style,title,lang,dir和className属性。
● 其它的专有的HTML..相关接口也定义了专有的属性和方法，如HTMLInputElement定义了focus(),blur()...
一个访问DOM接口的例子：
var n = document.documentElement; // This is a Node object.var children = n.childNodes; // This is a NodeList object.var head = children.item(); // Here is one way to use a NodeList.var body = children[]; // But this way is easier!
另一个需要了解的是：DOM标准定义了接口，而不是类，所以它没有定义任何构造函数方法。如果想创建一个Text对象，把它插入文档，不能用如下代码：
var t = new Text("this is a new text node"); // No such constructor
取而代之的是，DOM在Document接口中定义了大量有用的工厂方法(factory method).因此，要为文档创建一个Text节点，可以使用以下代码：
var t = document.createTextNode("this is a new text node");
8.7 遍历文档
DOM把一个HTML文档表示为Node对象的树，对于任何一个树形结构来说，最常用的事就是遍历树。
→依次检查树的每个节点。如以下代码所示：
1function countTags(n) { // n is a Node 2 var numtags = ; // Initialize the tag counter 3 if (n.nodeType == /**//*Node.ELEMENT_NODE*/) // Check if n is an Element 4 numtags++; // Increment the counter if so 5 var children = n.childNodes; // Now get all children of n 6 for(var i=; i < children.length; i++) { // Loop through the children 7 numtags += countTags(children[i]); // Recurse on each one 8 } 9 return numtags; // Return the total}
除了childNodes属性，Node接口还定义了其它几个有用的属性，包括firstChild,lastChild,nextSibling,previousSibling.
→获得DOM节点下所有的文本：
1 function getText(n) { 2 // Repeated string concatenation can be inefficient, so we collect 3 // the value of all text nodes into an array, and then concatenate 4 // the elements of that array all at once. 5 var strings = []; 6 getStrings(n, strings); 7 return strings.join(""); 8 9 // This recursive function finds all text nodes and appends // their text to an array. function getStrings(n, strings) { if (n.nodeType == /**//* Node.TEXT_NODE */) strings.push(n.data); else if (n.nodeType == /**//* Node.ELEMENT_NODE */) { // Note iteration with firstChild/nextSibling for(var m = n.firstChild; m != null; m = m.nextSibling) { getStrings(m, strings); } } } }
8.8 在文档中查找元素
● getElementsByTagName()方法
调用getElementsByTagName(param)方法，返回一个数组，该数组元素是文档中所有param元素。
例如：
var tables = document.getElementsByTagName("table");
alert("This document contains " + tables.length + " tables"); // 文档中定义了多少个Table
如果把特殊字符"*"传递给getElementsByTagName，它将返回文档中所有元素的列表。
有时不想操作元素列表，而想操作文档中一个特定元素，如果对文档中结构有充分的了解，仍可以使用getElementsByTagName方法:
var myParagraph = document.getElementsByTagName("p")[3];
但这并不是最好的方法。最好的办法是使用getElementsById()方法、
● getElementById()方法
getElementById方法不像getElementsByTagName返回一个数组列表，因为每个id属性值唯一，所以getElementById方法只返回一个元素。
getElementById是一个很重要的方法，非常常见。
以下通过getElementById方法获得表格中某个Cell的值。
var tableOfContents = document.getElementById("TOC");var rows = tableOfContents.getElementsByTagName("tr");var numrows = rows.length;
● getElementsByName()方法
与getElementById方法相似，它查询元素的name属性，而不是id属性。另外，一个文档中的name属性可能不唯一，所以getElementsByName方法返回的是元素的数组，而不是一个元素。
var link = document.getElementsByName("top")[];// Find all <input type="radio" name="shippingMethod"> elementsvar choices = document.getElementsByName("shippingMethod");
8.9 修改文档内容
DOM API的真正威力在于用Javascript动态修改文档的特性。
→对元素的一个列表按字母排序
1<script> 2function sortkids(e) { 3 // This is the element whose children we are going to sort 4 if (typeof e == "string") e = document.getElementById(e); 5 6 // Transfer the element (but not text node) children of e to a real array 7 var kids = []; 8 for(var x = e.firstChild; x != null; x = x.nextSibling) 9 if (x.nodeType == /**//* Node.ELEMENT_NODE */) kids.push(x); // Now sort the array based on the text content of each kid. // Assume that each kid has only a single child and it is a Text node kids.sort(function(n, m) { // This is the comparator function for sorting var s = n.firstChild.data; // text of node n var t = m.firstChild.data; // text of node m if (s < t) return -; // n comes before m else if (s > t) return ; // n comes after m else return ; // n and m are equal }); for(var i = ; i < kids.length; i++) e.appendChild(kids[i]);}</script><ul id="list"> <!-- This is the list we'll sort --><li>one<li>two<li>three<li>four <!-- items are not in alphabetical order --></ul><!-- this is the button that sorts the list --><button onclick="sortkids('list')">Sort list</button>
→把文档内容转换为大小写
1function upcase(n) { 2 if (n.nodeType == /**//*Node.TEXT_NODE*/) { 3 // If the node is a Text node, change its text to uppercase. 4 n.data = n.data.toUpperCase(); 5 } 6 else { 7 // If the node is not a Text node, loop through its children 8 // and recursively call this function on each child. 9 var kids = n.childNodes; for(var i = ; i < kids.length; i++) upcase(kids[i]); }}
→把一个节点的父节点重定为<b>元素
1<script> 2function embolden(n) { 3 if (typeof n == "string") n = document.getElementById(n); // Lookup node 4 var b = document.createElement("b"); // Create a new <b> element 5 var parent = n.parentNode; // Get the parent of the node 6 parent.replaceChild(b, n); // Replace the node with the <b> tag 7 b.appendChild(n); // Make the node a child of the <b> element 8} 9</script><!-- A couple of sample paragraphs --><p id="p1">This <i>is</i> paragraph #1.</p><p id="p2">This <i>is</i> paragraph #2.</p><!-- A button that invokes the embolden() function on the element named p1 --><button onclick="embolden('p1');">Embolden</button>
8.10 修改节点属性
可以调用element.setAttribute()方法来设置一个节点的属性，如：
var headline = document.getElementById("headline"); // Find named elementheadline.setAttribute("align", "center"); // Set align='center'//或者：headline.align = "center"; // Set alignment attribute.
8.11 Document段
DocumentFragment是一种特殊类型的节点，它自身不出现在文档中，只作为连续节点集合的临时容器，并允许将这些节点作为一个对象来操作。
把一个DocumentFragment插入文档时，插入的不是DocumentFragment本身，而是它所持有的子节点。
function reverse(n) { // Create an empty DocumentFragment as a temporary container var f = document.createDocumentFragment(); while(n.lastChild) f.appendChild(n.lastChild); // Finally, move the children of f all at once back to n, all at once. n.appendChild(f);}
8.12 给文档添加内容
Document.createElement()方法和Document.createTextNode()方法创建新的Element节点和Text节点。
而方法Node.appendChild()、Node.insertBefore()和Node.replaceChild()可以用来将它们添加到一个文档。
8.13 innerHTML属性
该属性可以用来获得和设置结点中HTML文本。例如：
var table = document.createElement("table"); // Create the <table> elementtable.border = ; // Set an attribute// Add a Name|Type|Value header to the tabletable.innerHTML = "<tr><th>Name</th><th>Type</th><th>Value</th></tr>";
Javascript学习8 - 脚本化文档(Document对象)的更多相关文章
- JavaScript权威指南--脚本化文档
知识要点 脚本化web页面内容是javascript的核心目标. 第13章和14章解释了每一个web浏览器窗口.标签也和框架由一个window对象所示.每个window对象有一个document对象, ...
- JavaScript权威设计--JavaScript脚本化文档Document与CSS(简要学习笔记十五)
1.Document与Element和TEXT是Node的子类. Document:树形的根部节点 Element:HTML元素的节点 TEXT:文本节点 >>HtmlElement与 ...
- Javascript学习7 - 脚本化浏览器窗口
原文:Javascript学习7 - 脚本化浏览器窗口 本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...
- JavaScript 客户端JavaScript之 脚本化文档
客户端JavaScript的存在把静态HTML转变为交互式的Web应用程序,脚本化Web页面的内容正是JavaScript存在的理由. 一个文档对象模型或者说DOM就是一个API,它定义了如何访问 ...
- javascript脚本化文档
1.getElememtById /** * 获取指定id的的元素数组 */ function getElements(/*ids...*/) { var elements = {}; for(var ...
- webservice学习01：wsdl文档结构
webservice学习01:wsdl文档结构 wsdl文档结构 WSDL文档示例 <wsdl:definitions xmlns:xsd="http://www.w3.org/200 ...
- Qt入门学习——Qt 5 帮助文档的使用
Qt入门学习——Qt 5 帮助文档的使用 学习图形界面开发,肯定离不开帮助文档的使用,因为它不像 C 语言那样就那么几个函数接口,图形接口的接口可以用海量来形容,常用的我们可能能记住,其它的真的没有必 ...
- ElasticSearch 学习记录之 分布式文档存储往ES中存数据和取数据的原理
分布式文档存储 ES分布式特性 屏蔽了分布式系统的复杂性 集群内的原理 垂直扩容和水平扩容 真正的扩容能力是来自于水平扩容–为集群添加更多的节点,并且将负载压力和稳定性分散到这些节点中 ES集群特点 ...
- 【ElasticSearch】：索引Index、文档Document、字段Field
因为从ElasticSearch6.X开始,官方准备废弃Type了.对应数据库,对ElasticSearch的理解如下: ElasticSearch 索引Index 文档Document 字段Fiel ...
随机推荐
- Node.js 博客实例（五）编辑与删除功能
原教程 https://github.com/nswbmw/N-blog/wiki/_pages的第五章,因为版本号等的原因,在原教程基础上稍加修改就可以实现. 如今给博客加入编辑文章与删除文章的功能 ...
- 理解和运用javascript中的call及apply
call是为了改变函数上下文context而存在的,换言之,就是改变函数内部this的指向.因为javascript存在[定义时上下文],[运行时上下文]及[上下文]是可以改变的.例如:var fun ...
- Vc6.0打开该文件坠毁
这是一个微软bug,下面是用户给出的溶液: http://blog.163.com/wjatnx@yeah/blog/static/12758622820138110530322/ http://bl ...
- 玩转Web之Json(一)-----easy ui+ajax + json 中关于Json的解析问题
在easy ui中使用Ajax+Json实现前后的数据交互时,当后台数据传输到客户端是需对Json数据进行解析,这里将对Json数据解析做简单总结. (一) 对于服务器返回的数据若没有做类型说明,需要 ...
- 如何在 Swift 中优雅地处理 JSON
阅读目录 在Swift中使用JSON的问题 开始 基础用法 枚举(Enumeration) 下标(Subscripts) 打印 调试与错误处理 后记 因为Swift对于类型有非常严格的控制,它在处 ...
- Android五个布局
Android五大布局Layout 1,LinearLayout 线性布局(能够嵌套使用): 制定线性布局的排列方式:水平排列 horizontal.垂直排列 vertical eg: android ...
- 每天进步一点点-->函数fseek() 使用方法
在阅读代码时,遇到了非常早之前用过的fseek(),非常久没实用了,有点陌生,写出来以便下次查阅. 函数功能是把文件指针指向文件的开头,须要包括头文件stdio.h fseek 函数名: fsee ...
- EasyUI禁用控制方法常采用
EasyUI禁用控制方法常采用: 1.validatebox使用可以使用:前两个适用于个人validatebox; 第三适用于整个form内箱; <1>.$("#id& ...
- StackExchange.Redis Client
StackExchange.Redis Client 这期我们来看StackExchange.Redis,这是redis 的.net客户端之一.Redis是一个开源的内存数据存储,可以用来做数据库,缓 ...
- Mysql 5.6 新特性
随笔,真的随笔,以后理解得更深了再修改. Index Condition Pushdown 更多的让存储引擎去处理Where语句中的条款,避免返回无关字段数据等: Multi-Range Re ...