DOM学习(JavaScript高级程序设计 第10章)

1、DOM是针对HTML和XML文档的一个API。(IE种的所有DOM对象都是以COM对象的形式实现的)

2、文档节点是每个文档的根节点。我们称元素为文档元素。文档元素是最外层的元素,文档中的其他元素都包含在文档元素中。每个文档元素只能有一个文档元素。而在HTML种,文档元素始终都是元素。

NODE类型

1、每一个节点都有一个NodeType属性,用于表明节点的类型。

2、nodeName和nodeValue中包含节点的具体信息。在使用之前最好检测一下节点的类型。

3、节点之间的关系;

  1、每个节点都有一个childNode属性,其中保存着一个NodeList对象。

  2、NodeList是一种类数组对象,用于保存一组有序的节点,可以通过位置来访问这些节点。(注:虽然可以同过方括号语法( [] )来访问NodeList的值,而且这个对象也有Length属性,但要注意它并不是Array的实例。NodeList对象的独特之处在于它实际上是基于DOM结构的动态执行查询的结果,因此DOM结构的变化能自动的反应与NodeList对象中。

   例:
      var firstchild = someNode.childNodes[0];
      var secondChild = someNode.childNodes.item(1);
      var count = someNode.childNodes.length;
    注:length属性是访问NodeList那一刻,其中包含的节点个数。 

    3、对arguments对象使用Array.prototype.slice()可以将其转换为数组。采用同样的方法可以将NodeList对象转化为数组。 

    var arrayOfNodes = Array.prototype.slice.call( someNode.childNodes,0);

   然而上行代码在IE8之前的浏览器之中并不能正常运行,如果希望实现同样的功能,将NodeList转换为数组,必须手动枚举所有成员。
function convertToArray(nodes){
    var array = null;
    try{
        array = Array.prototype.slice.call(nodes,0);
    } catch (ex) {
        array = new Array();
        for ( var i =0, len = nodes.length ; i < len;i++){
            array.push(nodes[i]);
        }
    }
    return array;
}
    4、每个节点都有一个parentNode属性,该属性指向文档树中的父节点。包含在同一个childNodes列表中的所有节点都具有相同的父节点。因此它们的parentNode属性都指向同一个节点。包含在同一个childNodes列表中的每个节点之间互为同胞节点。

    6、父节点的 firstChild和 lastChild 属性分别指向childNodes列表中的第一个和最后一个节点。在列表只有一个节点的情况下,这两个属性将指向同一个节点。若没有子节点,这两属性都为null。


    8、所有节点都有的最后一个属性是ownerDocument,该属性将指向整个文档的文档节点。通过该属性,我们不必再节点层次中通过层层回溯到达顶端,而是可以直接访问文档节点。

4、操作节点。

  1. 因为关系指针都是只读的,所以DOM提供了一些操作节点的方法其中较为常用的为 appendChild(),该方法用于向childNodes列表的末尾添加一个节点。添加完成之后,childNodes的新增节点、父节点以及以前的最后一个子节点的关系指针都会得到相应的更新。

  2. 如果想要将节点插入到ChildNodes列表中的某个特定的位置,而不是放到末尾,那么可以使用insertBefore()方法。这个方法接受两个参数:要插入的节点和作为参照的节点。插入节点后,被插入的节点将会变成参照节点的前一个同胞节点(previousSibling),同时方法被返回。如果参照节点为null,,,那么你与appendChild()又有什么区别呢?

  3. 唔,既然有了两种添加节点的方法,那么现在是替换节点的方法,replaceChild(),该方法接受两个参数:要插入的节点和要替换的节点,要替换的节点将由这个方法返回并从文档中被移除,同时由被插入的节点占据其位置,嗯,大概就是类似于小三上位顶替正宫的意思?

  4. 那么如果你只想除掉一个节点而又不想添加一个节点的话,那么 removeChild()绝对是你的不二选择。这个方法只会接受一个参数,那就是你想移除的节点。

  5. 有两个方法是所有类型的节点所共有的。第一个就是cloneNode(),用于创建调用这个方法的节点一个完全相同的副本。cloneNode()方法接受一个布尔值参数,表示是否执行深复制。在参数为true的情况下执行深复制,也就是复制节点及其整个子节点树;在参数为false的情况下,执行浅复制,即只复制节点本身。复制后节点副本属于文档所有,但并没有未其指定其父节点。因此该方法应搭配前面提到的三个方法进行使用,或者找一个相亲,或者自由恋爱,或者小三上位嗯。

  6. 需要注意的是cloneNode()方法不会复制DOM节点中的JavaScript属性,例如事件处理程序等,该方法只复制特性、在明确指定的情况下也会复制子节点,其他的一切都不会复制。然而,然而!我们的IE同学又一次特殊了,,,它会去复制事件的处理程序= =;因此,,,在复制之前最好先移除事件处理程序。。。这样对谁都好。。

  7. 最后一个属性要说的是normalize()方法,这个方法的唯一作用是处理文档中的文本节点,由于一些玄学原因,有可能会出现一些文本节点中不包含文本,或者接连出现两个文本节点的情况。因此当在某个节点上调用该方法时,就会自动在该节点的后代节点中查找上诉两种情况,遇到第一种情况直接就删除空的文本节点,第二种情况的话就是将它们合并为一个文本节点。简直就是方法中的清道夫啊~

Document类型

JavaScript通过Document对象来表示文档。在浏览器中,document对象是HTMLDocument(继承自Document类型)的一个实例,表示整个HTML页面。而且,document对象是window对象的一个属性,因此可以将其作为全局对象来进行访问。

  1. 文档的子节点。DOM规定的Document节点的子节点可以使DocumentType、Element、ProcessingInstruction或Comment。但是仍有两个访问子节点的快捷方式,第一个是documentElement属性,该属性始终指向HTML页面中的 < html > 元素。另一个就是通过childnodes列表来访问文档元素。但是第一种方法更为快捷、直接。

  2. 做为HTMLDocument对象的实例,document对象还有一个body属性,直接指向<body>元素。

  3. 所有的浏览器都是支持document.documentElement 和 document.body属性。

  4. 文档信息

    1.title 包含<title>元素中的文本,可以通过这个属性取得网页的标题,document.title;

    2.URL 包含页面完整的链接,也就是显示在地址栏的全部

    3.domain 只包含页面的域名。

    4.referrer 保存着链接到当前页面的那个URL。在没有来源页面的情况下,该属性可能为空。上诉三种信息都存在于HTTP请求的头部,只不过是通过这些属性使我们能够在JavaScript中访问到它们而已。

    其中document.domain 属性是可以设置的。但出于安全方面的考虑,只能由形如“www.xxx.com”设置为“xxx.com”而不能将其更改为“www.aaa.com”。也就是说不能将这个属性设置为URL不包含的域。

    如此一来当页面中包含来自其他子域的框架或内嵌页面时,能够设置的document.domain属性就非常方便了。

    另外,浏览器对于domain还有一个限制,就是说如果一来是域名是“松散的”(loose),那么不能将其设置为“紧绷的”(tight)。也就是说,如果将document.domain设置为“aaa.com”之后,就不能将其在设置回“www.aaa.com”了。否则就会出错。所有的浏览器都有这个限制,在IE8中最早出现。

  5. 查找元素。最常见的DOM应用,用于取得特定的某个或某组元素的引用,然后再执行一些操作。取得元素的操作可以使用document对象的几个方法来完成。其中,Document类型为此提供了两个方法:getElementById()和getElementByTagName()。

    1.getElementById() 接受一个参数:要取得的元素的ID。如果找到相应的元素则返回该元素,如果不存在带有相应ID的元素,则返回null。此处的ID应于元素中的id特性(attribute)严格匹配,包括大小写。

    然而在IE8及较低版本的中不区分ID的大小写。因此,如果是字母相同但大小写不同的话将会被当做相同的元素。

    如果页面中有多个元素具有相同的ID,那么getElementById()只会返回文档中第一次出现的元素。
    并且,IE7以及其较低版本还会有一个特性:name属性与给定ID匹配的表单元素(<input>、<textarea>、<button>、<select>)也会被该方法返回,也就是说如果哪个表单元素的name特性等于制定的ID,而且该元素位于带有给定ID的元素前面,那么IE就会返回前面的那个元素。

    2.getElementByTagName() 接受一个参数:要取得的元素的标签名。而返回的是包含零或多个元素的NodeList。在HTML文档中,会返回一个HTMLCollection对象,作为一个“动态”集合,该对象与NodeList非常相似。

    与NodeList对相似,HTMLCollection对象可以使用方括号或item()访问其中的元素,亦可通过length取得文档中该种元素的数量。

    HTMLCollection对象还有一个方法,叫做nameItem(),使用这个方法可以通过元素的name特性取得集合中的项。

    对于HTMLCollection而言,我们可以向方括号中传入数值或者字符串形式的索引值。在后台,对数字的索引值会自动调用item(),对于字符串的索引就会调用nameItem().

    如果想取得文档中的全部元素,只需向圆括号传入“*”即可,如

    var allElement = document.getElementByTagName("*");

    3.getElementByName() 返回所有带name特性的所有元素,该方法也会返回一个HTMLCollection。但是对于,这种方法取得的元素来讲,nameItem()取得的只是第一项,因为他们具有相同的name特性。

  6. 特殊集合;document对象还有一些特殊的集合,这些集合都是HTMLCollection对象,为了访问文档常用的部分提供了快捷方式。

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

    2.document.applets 包含文档中所有<applet>元素,因为不推荐使用该元素,所以这个集合已不再建议使用;

    3.document.forms 包含文档中所有的<form>元素,与
    document.getElementByTagName(“form”)取得的结果相同;

    4.document.images 包含文档中所有的<img>元素,与
    document.getElementByTagName(“img”)取得的结果相同;

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

  7. 文档写入,该功能已经存在有很多年了,顾名思义,该功能实现的是将输出流写入网页的能力。该能力通过以下四个方法来实现:write()、writeln()、open()、close()。其中,write()和writeln()方法都接受一个字符串参数,即为要写入到输出流的文本。这两个方法的区别在于一个会在末尾添上一个换行,一个不会。方法open()和close()分别用于打开和关闭网页的输出流。如果是在页面加载期间使用了write()和writeln()方法,则不需要用到这两个方法。

Element元素

未完

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值