JavaScript高级程序设计——第10章(上)

这周一直忙着工作上的事情,所以就开始的两天看了点~至于为啥从第五章直接跳到第十章,因为大佬看了我的进度,建议我先看第十章。。。。

IE中的所有DOM对象都是以COM对象的形式实现的。这意味着IE中的DOM对象与原生JavaScript对象的行为或活动特点并不一致

Node类型

Node.ELEMENT_NODE(1);

Node.ATTRIBUTE_NODE(2);

Node.TEXT_NODE(3);

Node.CDATA_SECTION_NODE(4);

Node.ENITY_REFERENCE_NODE(5);

Node.ENTITY_NODE(6);

Node.PROCESSING_INSTRUCTION_NODE(7);

Node.COMMENT_NODE(8);

Node.DOCUMENT_NODE(9);

Node.DOCUMENT_TYPE_NODE(10);

Node.DOCUMENT_FRAGMENT_NODE(11);

Node.NOTATION_NODE(12);

操作节点

下述四个必须先取得父节点

appendChild(),用于向childNodes列表的末尾添加一个节点。如果传入到appendChild()中的节点已是文档的一部分,将把该节点从原来的位置转移到新位置

insertBefore(),接受两个参数:要插入的节点和作为参照的节点。插入节点后,被插入的节点会变成参照节点的前一个同胞节点(previousSibling),同时被方法返回。如果参照节点为null,则等同于appendChild()

replaceChild(),接受两个参数:要插入的节点和要替换的节点

removeChild(),接受一个参数:要移除的节点。被移除的节点将成为方法的返回值

所有类型节点皆可

cloneNode(),用于创建调用这个方法的节点的一个完全相同的副本。接受一个布尔值参数,表示是否执行深复制。true,复制节点及其整个子节点树;false,只复制节点本身。复制后返回的节点属于文档所有,但是没有指定父节点。不会复制添加到DOM节点中的JavaScript属性(IE会,建议在复制前先移除事件处理程序)

如果已经将元素的引用保存在变量myList中

normalize(),用于处理文档树中的文本节点。由于解析器的实现或DOM操作等原因,可能会出现文本节点不包含文本,或者接连出现两个文本节点的情况。当在某个节点上调用这个方法时,就会在该节点的后代节点中查找上述两种情况。如果找到了空文本节点,则删除它;如果找到相邻的文本节点,则将它们合并为一个文本节点

Document类型

在浏览器中,document对象是HTMLDocument(继承自Document类型)的一个实例,表示整个HTML页面

document对象是window对象的一个属性,可以作为全局对象来访问

nodeName的值为”#document”

nodeValue的值为null

parentNode的值为null

ownerDocument的值为null

其子节点可能是一个DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或Comment

访问子节点

documentElement,指向元素

childNodes

body,指向元素

doctype,取得对的引用

关于浏览器对document.doctype的支持

IE8及之前版本:如果存在文档类型声明,会将其错误地解释为一个注释并把它当作Comment节点。而document.doctype的值始终为null

IE9+及Firefox:如果存在文档类型声明,则将其作为文档的第一个子节点:document.doctype是一个DocumentType节点,也可以通过document.firstChild或document.childNodes[0]访问同一个节点

Safari、Chrome和Opera:如果存在文档类型声明,则将其解析,但不作为文档的子节点。document.doctype是一个DocumentType节点,但该节点不会出现在document.childNodes中。

文档信息

title属性

URL

只有domain是可以设置的,但只能设置成子域名所含的域。如果域名一开始是loose,那么不能再设置为tight。即将document.domain设置为pearapple.net之后,就不能再将其设置回p2p.pearapple.net。

由于跨域安全限制,来自不同子域的页面无法通过JavaScript通信。而通过将每个页面的document.domain设置为相同的值,这些页面就可以互相访问对方包含的JavaScript对象了。

假设有一个页面加载自 www.pearapple.net,其中包含一个内嵌框架,框架内的页面加载自 p2p.pearapple.net。由于document.domain字符串不一样,内外两个页面之间无法相互访问对象的JavaScript对象。如果将这两个页面的document.domain值都设置为”pearapple.net”,它们之间就可以通信了。

查找元素

getElementById():找到返回该元素,不存在则返回null。除了IE8及较低版本,其他浏览器皆严格区分大小写。当页面中多个元素的ID值相同,只返回文档中第一次出现的元素

在IE7及较低版本,name特性与给定ID匹配的表单元素也会被该方法返回。建议不让表单字段的name特性与其他元素的ID相同

getElementsByTagName():接受要取得元素的标签名,返回包含零或多个元素的NodeList。在HTML文档中,返回一个HTMLCollection对象。要想取得文档中的所有元素,可以向getElementsByTagName()中传入”*”。标签名不需要区分大小写,但对于XML和XHTML页面区分大小写

getElementsByName():返回带有给定name特性的所有元素。一般用于取得单选按钮

特殊集合

都是HTMLCollection对象

document.anchors:包含文档中所有带name特性的元素

document.forms:包含文档中所有的元素

document.images:包含文档中所有的元素

document.links:包含文档中所有带href特性的元素

DOM一致性检测

hasFeature():接受要检测的DOM功能的名称及版本号

文档写入

在页面被加载的过程中,可以使用这两个方法向页面中动态地加入内容。注意不能直接包含字符串,应转换为

write():接受一个字符串参数,原样写入

writeln():接受一个字符串参数,末尾添加一个换行符

如果在文档加载结束后再调用,那么输出的内容将会重写整个页面。

open()和close()用于打开和关闭网页的输出流。如果是在页面加载期间使用write()或writeln()方法,则不需要用到这两个方法

Element类型

在HTML中,标签名始终都以全部大写表示;而在XML(有时候也包括XHTML)中,标签名则始终会与源代码中的保持一致

取得特性

getAttribute():传递的特性名与实际的特性名相同。如果给定名称的特性不存在,getAttribute()返回null。可以取得自定义特性的值,根据HTML5规范,自定义特性应该加上data-前缀以便验证。特性的名称不区分大小写。

在通过getAttribute()访问时,返回的style特性值中包含的是CSS文本,而通过属性来访问它则会返回一个对象。onclick()如果通过getAttribute()访问,则会返回相应代码的字符串。而在访问onclick属性时,则会返回一个Javascript函数(如果未在元素中指定相应特性,则返回null)

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180126G0XB2O00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励