资讯专栏INFORMATION COLUMN

JavaScript中DOM的层次节点(一)

leap_frog / 2466人阅读

摘要:是针对和文档的一个,描绘了一个层次化的节点树,允许开发人员添加修改删除节点的一部分。类型级定义了接口,该接口由中的所有节点类型实现。添加的这些属性分别对应于每个元素中都存在的下列标准特性。

DOM是针对HTML和XML文档的一个API,描绘了一个层次化的节点树,允许开发人员添加、修改、删除节点的一部分。

DOM将HTML和XML文档描绘成一个有多个节点构成的结构,节点分为12种不同的节点类型,每种都拥有自己的特点、数据和方法,并且和其他节点存在着某种关系。

html元素称为文档元素,所有的元素都包含在文档元素中,并且每个文档只有一个html元素。

1 Node类型

DOM1级定义了Node接口,该接口由DOM中的所有节点类型实现。这个接口在JavaScript中是作为Node类型实现的。因此JavaScript中所有的节点类型都继承Node类型,所有的类型都共享着相同的基本属性和方法。

Node.ELEMENT_NODE (1)

Node.ATTRIBUTE_NODE (2)

Node.TEXT_NODE (3)

Node.CDATA_SECTION_NODE (4)

Node.ENTITY_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)

11. Node.DOCUMENT_FRAGMENT_NODE (11)
12. Node.NOTATION_NODE (12)

由于IE没有公开构造函数,因此上述代码不能在IE中使用。所以为了确保跨浏览器的兼容性,判断Node类型的方法如下:

    if(someNode.nodeType == 1){
        alert("this is a element node!");
    }
1.1 nodeName和nodeValue

可以利用nodeName和nodeValue属性了解node的具体信息,这两个值和节点的类型有关。

    if(someNode.nodeType == 1){
        value = someNode.nodeName;
        //对于元素节点,nodeName保存的是元素的标签名,nodeValue始终为null
    }
1.2 节点关系

文档中所有节点相互之间都有关系,包括父子关系,同胞关系。

每个节点都有childNodes属性,保存着一个NodeList对象,NodeList是一种类数组的对象,可以使用childeNode[0],childNode.item(1)来访问,同时拥有length属性,但并不是Array实例。

parentNode:指向文档树种的父节点

nextSibling:紧挨着当前节点的下一个节点

previousSibling:紧挨着当前节点的上一个节点

firstChild:表现某一节点的第一个节点,childNodes[0]

lastChild:表示某一节点的最后一个子节点,childeNodes[childNodes.length-1]

1.3 节点操作

hasChildNodes()方法:判定一个节点是否有子节点,有返回true,没有返回false

removeChild()方法:去除一个节点

appendChild()方法:添加一个节点,如果文档树中已经存在该节点,则将它删除,然后在新位置插入

replaceChild(node1,node2)方法:从文档树中删除指定的节点node2,插入节点node1,被替换的节点仍然在文档中,但是没有位置

insertBefore(node1,node2)方法:在指定节点node2的前面插入节点node1,并返回node1.如果已经存在,则删除原来的,然后在新位置插入

cloneNode()方法复制一个节点,该方法有一个参数,true表示深复制,false表示浅复制。不会复制属性,处理程序等。

2 Doucument类型

document对象是HTMLDocument(继承自Document类型)的一个实例,表示整个html页面或其他基于xml的文档。并且document是window对象的一个属性,可以将其当做全局对象来访问。

类型
nodeType 9
nodeName #document
nodeValue null
parentNode null
2.1 文档子节点

Document的子节点可以是DocumentType、Element、ProcessingInstructior或Comment,有两个访问节点的快捷方式:

documentElement,该属性一直指向页面中的html元素。

childNodes,直接访问文档元素。

document.body,直接指向body元素

doucment.doctype,取得标签的信息

文档类型是只读的,而且它只有一个元素节点,通常早已存在。

2.2 文档信息

document对象有一些标准的Document对象所没有的属性,提供了 document对象所表现的网页的一些信息。

    
    //取得文档标题
    var title = document.title;
    //设置文档标题
    document.title = "New page title";
    //取得完整的URL
    var url = document.URl;
    //取得域名
    var domain = document.domain;
    //取得来源页面的URL
    var referrer = document.referrer;

    document.bgColor //设置页面背景色
    document.fgColor //设置前景色(文本颜色)
    document.linkColor //未点击过的链接颜色
    document.alinkColor //激活链接(焦点在此链接上)的颜色
    document.vlinkColor //已点击过的链接颜色
    document.fileCreatedDate //文件建立日期,只读属性
    document.fileModifiedDate //文件修改日期,只读属性
    document.fileSize //文件大小,只读属性
    document.cookie //设置和读出cookie
    document.charset //设置字符集 简体中文:gb2312
    
    
    document.body //指定文档主体的开始和结束等价于body>/body>
    document.body.bgColor //设置或获取对象后面的背景颜色
    document.body.link //未点击过的链接颜色
    document.body.alink //激活链接(焦点在此链接上)的颜色
    document.body.vlink //已点击过的链接颜色
    document.body.text //文本色
    document.body.innerText //设置body>.../body>之间的文本
    document.body.innerHTML //设置body>.../body>之间的HTML代码
    document.body.topMargin //页面上边距
    document.body.leftMargin //页面左边距
    document.body.rightMargin //页面右边距
    document.body.bottomMargin //页面下边距
    document.body.background //背景图片
2.3 查找元素

Document类型提供两个查找元素的方法:

getElementById(),如果找到相应的元素则返回该元素,如果不存在带有相应ID的元素,则返回null。

getElementByTagName(),返回包含零或多个元素的NodeList,在HTMl文档中,这个方法会返回一个HTMLCollection对象,与NodeList非常类似。其中THMLCollection对象有一个方法nameItem()

getElementsByName(),会返回带有给定name特性的所有元素。

    
    var images = document.getElementsByTagName("img");
    alert(images.length);//输出图像的数量
    alert(images[0].src);//输出第一个图像元素的src特性
    alert(images.item(0).src);//输出第一个图像元素的src特性
    
    //根据name获取单个相片
    var myImage = images.namedItem("myImage");
        myImage = images["myImage"];
2.4 文档写入

document.write()方法可以用在两个方面:

页面载入过程中用实时脚本创建页面内容

用延时脚本创建本窗口或新窗口的内容

只有当页面被加载的时候document.write()函数才会被执行

doucment.writeln()与上述类似,区别在于换行。
open()和close()分别用于打开和关闭网页的输出流,如果在页面加载期间使用write(),则不需要用这两个方法。

3 Element类型

Element类型用于表现XML或HTML元素,提供了对元素标签名、子节点及特性的访问。

类型
nodeType 1
nodeName 元素的签名
nodeValue null
parentNode Documnet或Element
3.1 HTML元素

所有的HTML元素都是有HTMLElement类型表示,HTMLElement类型直接继承自ELement并添加一些属性。添加的这些属性分别对应于每个HTML元素中都存在的下列标准特性。

    var div = document.getElementById("myDiv");
    
    //可以获取和设置属性的值
    alert(div.id);
    alert(div.className);
    alert(div.title);
    alert(div.lang);
    alert(div.dir); //获取元素的文字方向
3.2 操作特性

getAttribute():用来获取相应元素或其内容的附加信息,与上述获取属性基本一致,但是有两点区别:

style,通过getAttribute()获取的是CSS文本,通过属性获取的会返回一个对象。

onclick,getAttribute()获取相应代码的字符串,属性获取则会返回一个JavaScript函数。

一般情况下,开发人员最好使用对象的属性,只要在取得自定义特征值的情况下,才会使用getAttribute()

setAttribute():接收两个参数,要设置的特性名和值,如果特性已经存在,会修改特性值,如果不存在则会创建。

removeAttribute():用于彻底删除元素的特性,IE6及之前的版本不支持此方法。

3.3 创建元素

document.createElement()方法可以创建新元素,此方法只接收一个参数,即要创建元素的标签名(不区分大小)。

    //div创建插入过程 
    var div = document.createElement("div");
    div.id = "myNewDiv";
    div.className = "box";
    document.body.appendChild(div);

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/78413.html

相关文章

  • javaScript 高级程序设计笔记——DOM

    摘要:一类型在中,所有的节点类型都继承自类型。包含文档中所有带特性的元素包含文档中所有的元素包含文档中所有的元素包含文档中所有带特性的元素一致性检测因为分为多个级别,也包含多个部分,因此检测浏览器实现了的哪些部分就十分必要。 DOM是针对HTML和XML文档的一个APIDOM描绘了一个层次化的节点树,允许开发人员轻松自如地添加、删除、替换、修改页面的某一部分 一、节点层次 DOM将HTML文...

    JinB 评论0 收藏0
  • JavaScriptDOM层次节点(二)

    摘要:将添加到节点的末尾。从指定的位置将当前文本节点分成两个文本节点。类型值区域中的内容没有子节点类型此类型在浏览器中并不常用,只有和支持。类型特性就是元素属性的节点。 1 Text类型 Text类型为文本节点,包含的是可照字面解释的纯文本内容,可以包含转义后的HTML字符,但不能包含HTML代码。 类型 值 nodeType 3 nodeName #text nodeVal...

    hzx 评论0 收藏0
  • 《Webkit技术内幕》之页面渲染过程

    摘要:文章同步到技术内幕之页面渲染过程最近拜读了传说中的技术内幕一书,有很大收获,尤其是对页面渲染有了较深的认识。解析语法分析,基于词法解释器生成的新标记,构建成抽象语法树,解析器尝试将其与某条语法规则进行匹配。 文章同步到github《Webkit技术内幕》之页面渲染过程 最近拜读了传说中的《Webkit技术内幕》一书,有很大收获,尤其是对页面渲染有了较深的认识。由于功力有限,而且书中设...

    vvpvvp 评论0 收藏0
  • 《Webkit技术内幕》之页面渲染过程

    摘要:文章同步到技术内幕之页面渲染过程最近拜读了传说中的技术内幕一书,有很大收获,尤其是对页面渲染有了较深的认识。解析语法分析,基于词法解释器生成的新标记,构建成抽象语法树,解析器尝试将其与某条语法规则进行匹配。 文章同步到github《Webkit技术内幕》之页面渲染过程 最近拜读了传说中的《Webkit技术内幕》一书,有很大收获,尤其是对页面渲染有了较深的认识。由于功力有限,而且书中设...

    adam1q84 评论0 收藏0
  • 《Webkit技术内幕》之页面渲染过程

    摘要:文章同步到技术内幕之页面渲染过程最近拜读了传说中的技术内幕一书,有很大收获,尤其是对页面渲染有了较深的认识。解析语法分析,基于词法解释器生成的新标记,构建成抽象语法树,解析器尝试将其与某条语法规则进行匹配。 文章同步到github《Webkit技术内幕》之页面渲染过程 最近拜读了传说中的《Webkit技术内幕》一书,有很大收获,尤其是对页面渲染有了较深的认识。由于功力有限,而且书中设...

    forsigner 评论0 收藏0

发表评论

0条评论

leap_frog

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<