• js文本对象模型【DOM】(十一)


    一、W3C DOM 标准被分为 3 个不同的部分:
    1、Core DOM - 所有文档类型的标准模型【IE中的所有DOM对象都是以COM对象的形式实现的
    2、XML DOM - XML 文档的标准模型
    3、HTML DOM - HTML 文档的标准模型

    二、JavaSript原生对象中的DOM对象【HTML DOM
    1、Node类型
    javascript中所有的节点类型都继承自Node类型,所有节点类型都共享着相同的基本属性和方法。

    2、Node的节点类型    
    a、Document类型    document
    b、Element类型    元素节点类型
    c、Text类型    文本节点
    d、Comment类型        注释节点

    3、Node类型的相关属性和方法
    a、Node类型属性
    nodeType    节点类型【节点类型-->对应的返回值】(9138)
    Document--> 9;Element -->1;TextNode -->3;Comment--> 8
    document 是Document构造函数的实例
    document.body是Element构造函数的实例
    document.body.firstChild 是Comment构造函数的实例或Text构造函数的实例

    nodeName    该属性取决于节点类型,如果是元素类型,值为元素的标签名

    nodeValue    该属性取决于节点类型,如果是元素类型,值有null

    childNodes    【返回相应节点的所有孩子节点组成的类数组对象
    NodeList是一种类数组对象用来保存一组有序的节点,NodeList是基于DOM结构动态执行查询的结果,DOM结构变化可以自动反应到NodeList对象中。
    访问时可以通过中括号访问,也可以通过item()方法访问。

    可以使用slice方法将NodeList转换为数组
    eg:

        var arr = Array.prototype.slice.call(nodes,0);

    parentNode        相应子节点的父元素节点

    firstChild  所有孩子节点中的第一个孩子节点

    lastChild  所有孩子节点中的最后一个孩子节点

    previousSibling  前一个兄弟节点

    nextSibling  后一个兄弟节点

    ownerDocument
    指向表示整个文档的文档节点。任何节点都属于它所在的文档,任何节点都不能同时存在于两个或更多个文档中
    eg:

        console.log(document.body.ownerDocument === document);    //true
        console.log(document.head.ownerDocument === document);    //true
        console.log(document.getElementsByTagName('div').ownerDocument);    //undefined

    b、Node类型方法
    hasChildNodes()    【返回值为boolean类型】        该节点是否有孩子节点

    以下四个方法都需要使用父节点对象进行调用
    appendChild(要添加的节点)
    添加一个节点作为该节点的最后一个孩子节点    【返回新增的节点
    若要添加的参数节点已经为文档的一部分,位置更新而不插入【任何DOM节点不能同时出现在文档中的多个位置】

    insertBefore(要插入的节点,[参照的节点])    
    在参照的节点前面插入一个同胞节点    【返回要插入的节点
    若第二个参数为null将会将要插入的节点追加在NodeList后面【作为该节点的lastChild】

    replaceChild(要插入的节点,要替换的节点)
    移除要替换的节点并在其位置插入要插入的节点    【返回要替换的节点

    removeChild(要移除的节点)    
    移除要移除的节点    【返回要移除的节点


    其他方法
    cloneNode(boolean)   【克隆节点
    用于创建调用这个方法的节点的一个完全相同的副本。
    参数为布尔类型参数为true时,表示深复制,即复制节点以及整个子节点数。
    参数为false的时候,表示浅复制,只复制节点本身。
    该方法不会复制添加到DOM节点中的JavaScript属性,例如事件处理程序等。
    该方法只复制特定,子节点,其他一切都不复制。
    但是IE中可以复制,建议标准相同,在复制之前,移除所有事件处理程序。

    normalize()   【删除空白节点,将两个文本节点合并为一个文本节点
    处理文档树中的文本节点,由于解析器的实现或DOM操作等原因,可能会出现文本节点不包含文本,或者接连出现两个文本节点,
    当在某个节点上调用了该方法,会删除空白节点,会找到相邻的两个文本节点,并将他们合并为一个文本节点。

  • 相关阅读:
    每天一个linux命令(21):chgrp,chown,chmod
    设计模式之单例模式
    每天一个linux命令(20):find命令之exec
    每天一个linux命令(19):find 命令概览
    每天一个linux命令(18):locate 命令
    每天一个linux命令(17):whereis 命令
    【6折抢】戴尔i7新品Latitude高性能商用本
    Spring Cloud Gateway VS Zuul 比较,怎么选择?
    Zookeeper怎么实现分布式锁?
    数据库怎么分库分表,垂直?水平?
  • 原文地址:https://www.cnblogs.com/nzcblogs/p/11219086.html
Copyright © 2020-2023  润新知