文档对象模型---DOM(二)

1. Document类型:用来表示文档。在javascript中,① document对象用来表示整个HTML页面。document对象为HTMLDocument(继承自Document类型)的一个实例。② document对象是window对象的一个属性,可以将其作为全局对象来访问。

Document类型可以表示HTML页面或者其他基于XML的页面。最常用的还是document对象

Document节点的特征:

     nodeType 的值为 9;
     nodeName 的值为"#document";
     nodeValue 的值为 null;
     parentNode 的值为 null;
     ownerDocument 的值为 null;
其子节点可能是一个 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction或 Comment

document对象的属性:

     ① documentElement属性:指向HTML页面的<html>元素。

     ② childNodes属性:返回子节点列表。

     ③ document.documentElement == document.childNodes[0] == document.firstChild   --------->html

     ④ body属性:指向<body>元素

     ⑤ document.doctype-----获得<!DOCTYPE>的引用。

     ⑥ document.title-----获得<title>标签的文本,也可以用它来修改<title>标签的文本并体现在浏览器的标题栏中。

     ⑦ document.URL-----获得当前页面完整的URL、document.domain----获得当前页面的域名(可以自行设置)、document.referrer----获得链接到当前页面的页面的URL。(这三个信息都存在HTTP头部)

document对象的方法:

     ① getElementById():根据id返回对应的元素。(参数区分大小写)如果页面有多个id相同的元素,则返回页面中的第一个元素。

     ② getElementsByTagName(): 根据标签名返回对应的元素。返回一个HTMLCollection对象。访问HTMLCollection对象有四种方式:通过索引、通过item()函数、通过namedItem()方法----针对有name属性的元素、方括号语法---传入数值,后台调用的是item方法,传入字符串后台调用的是namedItem方法。

     ③ getElementsByName():返回带给给定name的所有元素。最常用的是获取单选按钮。

document对象的特殊集合:这些集合都是HTMLCollection对象

     ① document.anchors:包含文档中所有带name特性的<a>元素。

     ② document.form:包含文档中所有的<form>元素。

     ③ document.images:包含文档中所有的<img>元素。

     ④ document.links:包含文档中所有的带有href属性的<a>元素。

document对象将输出流写入网页中的能力:wirte()、writeln()、open()、close()

     ① write()和writeln():接收一个字符串参数,即要写到网页中的文本。前者原样写入、后者会在字符串末尾添加一个换行符。

网页中的结果为:

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

     Element节点的特征:

        nodeType的值为1

        nodeName的值为元素的标签名(与tagName属性的功能相同)

        nodeValue的值为null

        parentNode的值为Document或Element                                                                                                                                            子节点可能为:Element、Text、Comment、ProcessingInstruction、CDATASection、EntityReference                                                          

注意:在HTML中,标签名始终以全部大写表示。而在XML中标签名与源代码保持一致。

  HTML元素都由HTMLElement类型(继承自Element)或者他的子类型来表示。

  HTML元素的属性:跟已通过属性获取或修改属性值

      ① id属性:元素在文档中的唯一标识符。

      ② title属性:元素的附加说明信息,通过工具提示条显示出来。

      ③ className属性:与元素的class特性对应。

HTML元素取得特性(特性的用途是给出相应的元素或内容的附加信息)的方法:

     ①getAttribute()方法:取得(非)自定义特性,特性的名称不区分大小写。非自定义的特性会以属性的形式添加到DOM对象中,所以元素的非自定义特性也可以通过属性来访问。

     ② setAttribute()方法:设置特性的值(设置的特性名会统一转换为小写形式)。参数为要设置的特性的名字,和特性的值。如果特性已经存在,该函数会以指定的值替换现有的值;如果特性不存在,该函数会创建该特性并设置相应的值。

     ③ removeAttribute() 方法:彻底删除元素的特性。

Element类型的attributes属性: 返回一个NamedNodeMap对象,heNodeList类似,是一个动态的集合。该对象保存的是Attr节点,该节点表示元素的特性。

    NamedNodeMap对象的方法:

       ① getNamedItem(name):返回nodeName属性为name的节点。

       ② removeNamedItem(name):从列表中删除nodeName属性为name的节点。

       ③ setNamedItem(node):向列表添加节点,一节点的nodeName属性为节点。

       ④ item(pos):返回数字pos位置处的节点。

创建元素:document.createElement(),参数为标签名或者传入完整的元素标签

    document.createElement("div");

    document.createElement("<div id=\"myNewDiv\" class=\"box\"></div>");

    可以使用appendChild()、insertBefore()、replaceChild()将新元素加入到文档中。如:document.body.appendChild(node)

 3. Text类型(文本节点):表示文本节点,包含的是纯文本内容,纯文本内容可以包含转义后的HTML字符,但不能包含HTML代码。

      Text节点的特征:

           nodeType值为3

           nodeName值为#text

           nodeValue值为节点所包含的文本(与data的属性相同)

           parentNode为Element节点,没有子节点

      Text节点的方法:

         ① appendData(text):将text添加到节点的末尾

         ② deleteData(offset,count):从offset指定位置开始删除count个字符

         ③ insertData(offset,text):从offset指定位置插入text

         ④ replaceData(offset,count,text):用text替换从offset指定位置开始到offset+count为止处的文本

         ⑤ splitText(offset):从offset指定位置将当前文本分成两个文本。原来的文本节点将包含从开始节点到指定位置之前的内容,新文本节点将包含剩下的文本。该方法返回一个新文本节点,该文本节点与原节点的parentNode相同。

         ⑥ subStringData(offset,count):提取从offset指定位置开始到offset+count为止处的字符串

         ⑦ normalize():将相邻文本合并

      Text节点的属性:length,保存的是节点中字符的数目

      创建文本节点:

          document.createTextNode("Hello World")或者document.createTextNode("<strong>Hello</strong> world!")

页面显示为:

splitText()方法:

网页显示:

4.Comment类型:注释节点,其余<html></html>之间的内容

   Comment节点的特征:

        ① nodeType的值为8

        ② nodeName的值为#comment

        ③ nodeValue的值为注释的内容(与data属性类似)

        ④ parentNode的值为Document或者Element

        ⑤ 没有子节点

    Comment节点的方法:

         ① appendData(text):将text添加到节点的末尾

         ② deleteData(offset,count):从offset指定位置开始删除count个字符

         ③ insertData(offset,text):从offset指定位置插入text

         ④ replaceData(offset,count,text):用text替换从offset指定位置开始到offset+count为止处的文本

         ⑤ subStringData(offset,count):提取从offset指定位置开始到offset+count为止处的字符串

         ⑥ normalize():将相邻文本合并

         ⑦ document.createComment()方法可以创建注释节点

   

    

    

猜你喜欢

转载自blog.csdn.net/wurourouzhang/article/details/85336754