脚本化文档(一)

  1. getElementById():Document对象的该方法通过id获取元素,在低于IE8版本的浏览器中,getElementById()对匹配元素的ID不区分大小写,而且也返回匹配name属性的元素。
  2. getElementsByName():Document对象的该方法通过name属性获取html元素,该函数定义在HTMLDocument类中,而不在Document类中,所以它只针对HTML文档可用,在XML文档中不可用。,在IE中,getElementsByName()也返回id属性匹配指定值的元素。为了兼容,应该小心谨慎,不要将同样的字符串同时用做名字和id。为某些html元素设置name属性将自动在Window对象中创建匹配指定值的元素。如果给定的名字只有一个元素,自动创建的文档属性对应的该值是元素本身。如果有多个元素,该文档属性的值是一个NodeList对象,它表现为一个包含这些元素的数组。
  3. getElementsByTagName():Document对象的这个方法用来选择指定类型(标签名)的所有HTML或XML元素。Element类也定义了这个方法,它只选取调用该方法的元素的后代元素。
  4. document.body和document.head分别用来获取HTML文档中<body>和<head>元素。Document类的documentElement属性指代文档的根元素。
  5. 结点列表和HTML集合:getElementsByName()和getElementsByTagName()都返回NodeList对象,而类似的document.image和document.forms的属性为HTMLCollection对象。这两个对象不是历史文档的一个静态快照,而通常是实时的,并且当文档变化时他们所包含的元素列表能随之改变,这是其中一个最重要和令人惊讶的特性。假设在一个没有<div>元素的文档中调用getElementsByTagName(‘div’),此时返回值是一个length为0的NodeList对象。如果再在文档中插入一个新的<div>元素,此元素将自动成为NodeList的一员,并且它的length属性变成1。通常,NodeList和HTMLCollection的实时性非常有用。但是,如果在迭代一个NodeList对象时在文档中添加或删除元素,首先会需要对NodeList对象生成一个静态的副本。

var tmp=Array.prototype.slice.call(nodelist,0);

  1. getElementsByClassName():通过类名来选取元素。在HTML文档和HTML元素上都可以调用getElementByClassName(),它的返回值是一个实时的NodeList对象,包含文档或元素所有匹配的后代节点。该方法只需要一个字符串参数,但是该字符串可以由多个空格隔开的标识符组成。只有当元素的class属性值包含所有指定的标识符时才匹配,但是标识符的顺序是无关紧要的。注意,class属性和geElementsByClassName()方法的类似标识符之间都是用空格隔开的,而不是逗号。

如今的Web浏览器依赖于文档开头处对<!DOCTYPE>声明的严格程度来选择“怪异模式”或“标准模式”方式显式HTML文档。怪异模式是为了向后兼容而存在的,其中一个怪异行为就是class属性中和css样式表中的类标识符不区分大小写。geElementByClassName()方法使用同样的样式匹配算法。如果文档以怪异模式渲染,该方法将执行不区分大小写的字符串比较;否则,该比较区分大小写。该方法在IE8及以下未实现。

  1. querySelectorAll():它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList对象。该对象并不是实时的:它包含在调用时刻所匹配的元素,但它并不更新后续文档的变化。如果没有匹配的元素,querySelectorAll()将返回一个空的NodeList对象。如果选择器字符串非法,querySelectorAll()将抛出一个异常。此外,文档对象还定义了querySelector()方法:返回第一个匹配的元素(以文档顺序)或者如果没有匹配的元素就返回null。

这两个方法在Element节点中也有定义(并且也在DocumentFragment节点中)。在元素上调用时,指定的选择器仍然在整个文档中进行匹配,然后过滤出结果集以便它只包含指定元素的后代元素。这看起来是违反常规的,因为它意味着选择器字符串能包含元素的祖先而不仅仅是上述所匹配的元素。

CSS定义了“:first-line”和“:first-letter”:等伪元素。在CSS中,他们匹配文档节点的一部分而不是实际元素。如果和querySelectorAll()或querySelector()一起使用它们是不匹配的。而且,很多浏览器拒绝返回“:link”和“:visited”等伪类的匹配结果,因为这会泄露用户的浏览历史记录。

所有当前的浏览器都支持querySelector()和querySelectorAll()方法。但是注意,这些方法的规范并不要求支持CSS3选择器:鼓励浏览器支持和在样式表中一样的选择器集合。当前的浏览器除了IE都支持CSS3选择器。IE7和IE8支持CSS2选择器。

  1. Document对象,它的Element对象和文档中表示文本的Text对象都是Node对象。Node定义了以下重要的属性:

1)  parentNode:该节点的父节点,或者针对类似Document对象应该是null,因为他没有父节点。

2)  childNodes:只读的类数组对象(NodeList对象),它是该节点的子节点的实时表示。

3)  firstChild、lastChild:该节点的子节点中的第一个和最后一个,如果该节点没有子节点则为null。

4)  nextSibling,previousSibling:该结点的兄弟结点中的前一个和下一个。具有相同父节点的两个节点为兄弟节点。节点的顺序反映了它们在文档中出现的顺序。这两个属性将节点之间以双向链表的形式连接起来。

5)  nodeType:该节点的类型,9代表Document节点,1代表Element节点,3代表Text节点,8代表Comment节点,11代表DocumentFragment节点。

6)  nodeValue:Text节点或Comment节点的内容。

7)  nodeName元素的标签名,以大写的形式表示。

  1. 注意,Text和Comment节点没有children属性,它意味着Node.parentNode属性不可能返回Text或Comment节点。任何Element的parentNode总是另一个Element,或者,追溯到树根的Document或DocumentFragment节点。
  2. Element属性:firstElementChild、lastElementChild、nextElementSibling、previousElementSibling、childElementCount(子元素的数量。返回值和children.length值相等)以上和Node对象的属性类似,只是这些属性只代表Element。
  3. HTML属性作为Element属性:HTML属性名不区分大小写,但JavaScript属性名则大小写敏感。从HTML属性名转换到JavaScript属性名应该采用小写。但是,如果属性名包含不止一个单词,则将除了第一个单词以外的单词的首字母大写,例如:defaultChecked和tabIndex。有些HTML属性名在JavaScript中是保留字。对于这些属性,一般的规则是为属性名加前缀“html”。例如,HTML的for属性(<lable>元素)在JavaScript中变为htmlFor属性。“class”在JavaScript中是保留字(但还未使用),它是HTML非常重要的class属性,是上面规则的一个例外:在JavaScript代码中它变为className。表示HTML属性的值通常是字符串。当属性为布尔值或数值,属性也为对应的类型,而不是字符串。
时间: 2024-08-21 16:00:29

脚本化文档(一)的相关文章

JS复习—Dom脚本化文档

Dom脚本化文档 一.选取文档元素 (1)用指定的id属性 var section1 = document.getElementsById('section1'); 注意:在低于IE8的浏览器中,getElementById()对匹配元素的Id不分大小写,也返回匹配name的元素. (2)用指定的name属性 定义:name属性只存在少数的HTML元素,包括表单.表单元素.<iFrame>和<img>元素 var radioButtons = document.getElement

第十三章 脚本化文档

客户端javascript存在使得静态的html文档编程了交互式的web应用.校本化web页面内容是javascript的核心目标.本章———本书最重要的章节之一,阐述了它是如何做到的客户端javascript的存在使得静态的html文档变成了交互式的web应用.校本化web页面javascript核心目标.本章将阐述它是如何做到的. 第11章和12章解释了每一个web浏览器窗口.标签也和框架由一个window对象所示.每个window对象有一个document对象,document对象表示窗口

脚本化文档

每个Window对象有一个document属性引用了Document对象.Document对象表示窗口的内容.它并非独立的,它是一个巨大的API中的核心对象,叫做文档对象模式DOM,它代表和操作文档的内容. 文档对象模式DOM是表示和操作HTML和XML文档内容的基础API.HTML文档的树状结构包含表示HTML标签或元素(如<body><p>)和表示文本字符串的节点,它也可能包含表示HTML注释的节点 每个方框是文档的一个节点,它表示一个Node对象.我们将在后续几节中讨论nod

脚本化文档(二)

获取和设置非标准HTML属性:Element类型还定义了getAttribute()个setAttribute()方法来查询和设置非标准的HTML属性.也可以用来查询和设置XML文档中元素上的属性.这些方法和前面的基于API之间的区别有:1)属性都被看做是字符串.getAttribute()不返回数值.布尔值或对象:2)方法使用标准属性名,甚至当这些名称为JavaScript保留字时也不例外.对HTML元素来说,属性名不区分大小写. hasAttribute()和removeAttribute(

脚本化文档(1)

DOM概览 上图的每个方框是文档的一个节点,它表示一个Node对象. 注意,通用的Document和Element类型与HTMLDocument和HTMLElement类型之间是有严格的区别的.Document类型代表一个HTML或XML文档,Element类型代表该文档中的一个元素.HTMLDocument和HTMLElement子类只是针对于HTML文档和元素. 选择文档元素 获取文档的一个或多个元素有如下方法: 用指定的id属性 用指定的name属性 用指定的标签名字 用指定的CSS类(c

javascript脚本化文档

1.getElememtById /** * 获取指定id的的元素数组 */ function getElements(/*ids...*/) { var elements = {}; for(var i = 0; i < arguments.length; i++) { var id = arguments[i]; var elt = document.getElementById(id); if (elt == null) throw new Error("No element wit

C# Word文档操作——添加Word页眉、页脚和页码

在Word文档中,我们可以通过添加页眉.页脚的方式来丰富文档内容.添加页眉.页脚时,可以添加时间.日期.文档标题,文档引用信息.页码.内容解释.图片/LOGO等多种图文信息.同时也可根据需要调整文字或图片在页眉.页脚处的位置.因此,本文将介绍如何在C#中使用社区版控件Free Spire. Doc for .NET来添加页眉.页脚以及页码方法. 提示:下载安装该组件后注意在你的VS项目程序中引用dll文件(该dll文件可在安装文件下的Bin文件夹中获取) 一.添加文本.图片页眉 using Sp

JavaScript 客户端JavaScript之脚本化HTTP(通过XMLHttpRequest)

XMLHttpRequest对象的设计目的是为了处理由普通文本或XML组成的响应:但是,一个响应也可能是另外一种类型,如果用户代理(UA)支持这种内容类型的话. 大多数浏览的客户端JavaScript都包含此功能. HTTP协议 规定了Web浏览器如何从Web服务请求文档,如何向Web服务器传送表单内容,以及如何响应 这些请求和传递. Web浏览器处理了很多HTTP(通常HTTP并不在脚本的控制之下) 1.用户点击一个链接 2.提交一个表单 3.输入一个URL 通常JavaScript代码可能脚

脚本化内联样式

HTML中引入CSS样式的方式有三种: 1.最常用的,引入样式表,在样式表中编写样式,引入方式如下:<link href="css/style.css" rel="stylesheet" type="text/css">2.在Html头部用<style></style>包起来,在这里面编写样式:<style type="text/css">*{padding: 0;margin: