zoukankan      html  css  js  c++  java
  • DOM--3 DOM核心和DOM2 HTML(2)

    核心Node对象##

    由于继承扩展的关系,DOM中大部分对象会有Node对象的属性和方法,其中包括:

    • nodeName

    DOM2核心中规定的每种nodeType预期的nodeName值

    对象 返回值
    Element.nodeName 元素的名称,大写
    Attr.nodeName 属性的名称,大写
    Text.nodeName #text
    CDATASection.nodeName #cdata-section
    EntityReference.nodeName 实体引用的名称
    Entity.nodeName 实体的名称
    ProcessingInstruction.nodeName 目标的名称
    Comment.nodeName #comment
    Document.nodeName #document
    DocumentType.nodeName 文档类型的名称,如HTML
    DocumentFragment.nodeName #document fragment
    Notation.nodeName 表示法的名称
    • nodeValue

    要注意的是不是所有的DOM对象都是有意义的

    对象 返回值
    Element.nodeName null
    Attr.nodeName 字符串形式的属性值
    Text.nodeName 字符串形式的节点内容
    CDATASection.nodeName 字符串形式的节点内容
    EntityReference.nodeName null
    Entity.nodeName null
    ProcessingInstruction.nodeName 字符串形式的节点内容
    Comment.nodeName 字符串形式的注释文本
    Document.nodeName null
    DocumentType.nodeName null
    DocumentFragment.nodeName null
    Notation.nodeName null
    • nodeType
    等价命名常量 nodeType值
    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
    Node.DOCUMENT_FRAGMENT_NODE 11
    Node.NOTATION_NODE 12

    注意在判断nodeType的时候,应该用浏览器中具体的等价常理; 当然,在某些不支持的浏览器中,也可以直接用自己定义的方式比较

    if(node.nodeType == Node.ELEMENT_NODE) { }
    
    • parentNode/childNodes

    树形结构中,每个Node对象都有许多预定义的属性,分别引用树中的其它相关节点。这些属性除了childNodes引用的是包含DOM对象的NodeList类数组对象(所以可以用item方法获取索引),其它的都引用一个实际的DOM对象。

    • firstChild/lastChild (一般情况下,这两个节点都应该会是Text节点)

    • previousSibling/nextSibling(如果没有的话,返回null)

    节点的属性###

    节点属性也扩展自Node对象,但是它不是包含在通常表示父子关系的树形结构中;作为Attr对象的实例,节点属性被包含在相应节点的attributes成员的一个NamedNodeMap对象中

    DOM2中,attributes是Node接口定义的属性,其还实现了Attr和NameNodeMap接口;事实上其包含的是一个节点的所有属性的集合 node.attributes

    • item, 也可以用次方法获取索引(NameNodeMap对象中的方法)

    • getNamedItem 根据具体的属性名来获取属性 (NameNodeMap对象中的方法)(getNamedItem()方法与Element对象的getAttribute()方法类似,不过attributes.getNamedItem()方法在任何节点上都有效,也包括那些不是Element对象的节点。)

    • 获取的属性的属性,nodeName/nodeType/nodeValue(现在改为value)

    • ownerDocument

    节点的ownerDocument属性是指向节点所属的根文档的引用。大多数情况下,都可以通过它在作用域中引用document,或者window.document,因为在浏览器中只会有一个document的实例。

    • hasChildNodes()/hasAttributes() 检查某个节点是否具有子节点或属性 (而获取它们的个数分别是childNodes.length/attributes.length)

    操纵DOM节点树###

    • appendChild()/insertBefore(new, node)
    • replaceChild(new, old)/removeChild() ;注意它们是在父节点操作的;
    • 注意一般获取节点的操作都是直接获取引用,要向操作其副本,使用cloneNode();
  • 相关阅读:
    设计模式---003代理模式(转载自我的老师 Alley-巷子)
    设计模式---002适配模式(转载自我的老师 Alley-巷子)
    设计模式---001单例模式(转载自我的老师)
    【JavaScript算法】---希尔排序(转载自我的老师 Alley-巷子)
    【JavaScript算法】---快速排序法(转载自我的老师 Alley-巷子)
    将博客搬至CSDN
    程序员10元盒饭完整版
    querylist采集数据 模拟滑动验证码 jcapche
    php压缩图片工具类(亲测可用)
    elastic-php should匹配设置至少匹配一个条件
  • 原文地址:https://www.cnblogs.com/jinkspeng/p/4263089.html
Copyright © 2011-2022 走看看