zoukankan      html  css  js  c++  java
  • [10.DOM]各节点类型详细介绍

    DOM节点

    • Node类型 (someNode.nodeType[.nodeName][.nodeValue])

    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);

    • 节点关系

    parentNode(childNodes)当前节点的父(子)节点

    firstChild(lastChild)第(最后)一个子节点

    previousSibling(nextSibling)上(下)一个兄弟节点

    • 操作节点

    appendChild()、insertBefore()、replaceChild()、cloneNode()

    Document类型

    document对象是HTMLDocument的一个实例,表示整个html页面。document对象是window对象的一个属性,因此可以将其作为全局对象访问。

    nodeType : 9,

    nodeName : '#document',

    nodeValue : null

    • 文档的子节点

    <html>的引用:document.documentElement

    <body>的引用:document.body

    • 文档信息

    网页标题:document.title

    当前页url:document.URL

    当前页域名:document.domain

    来源页的url:document.referrer

    • 查找元素

    document.getElementById()、document.getElementsByTagName()、document.getElementsByName()

    • 特殊集合

    带name的a标签:document.anchors

    <form>元素:document.forms

    img元素:document.images

    带href的a标签:document.links

    Element类型

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

    nodeType : 1,

    nodeName : 标签名,

    nodeValue : null

    • 标准属性:id、title、lang、dir、className,原生js获得的dom节点可通过.获取
    • 取得与修改属性

    获得属性值:getAttribute('属性名')

    修改属性值:getAttribute('属性名','新值')

    删除属性:removeAttribute('属性名')

    • 获得所有属性的数组:attributes,私有方法有getNamedItem(nodeName)、removeNamedItem(nodeName)、setNamedItem(node)、item(pos),还有nodeName、nodeValue

    获得属性值:attributes['属性名']

    • 创建元素:createElement('节点类型'),ie可直接传入完整的元素标签

    Text类型

    节点中的纯文本内容。获得节点的引用后用nodeValue和data获得文本内容。

    nodeType : 3,

    nodeName : '#text',

    nodeValue : 文本内容

    • 文本的操作

    尾部插入:appendData('内容')

    指定位置删除节点:deleteData(pos,count)

    指定位置插入节点:insertData(pos,'内容')

    指定位置替换内容:replaceData(pos,count,'内容')

    以指定字符拆分内容:splitText(pos)

    提取指定位置字符串:substringData(pos,count)

    • 创建文本节点:document. createTextNode('内容')
    • 合并element下的所有文本节点:element.normalize()

    Comment类型(注释)

    获得节点的引用后用nodeValue和data获得注释内容。操作的方法和Text类型相同(除splitText()方法)。

    nodeType : 8,

    nodeName : '#comment',

    nodeValue : 注释内容

    • 创建注释节点:document. createComment('内容')

    CDATASection类型(不常用)

    针对基于XML的文档,表示CDATA区域。继承自Text类型,但splitText()方法不可用。

    nodeType : 4,

    nodeName : '#cdata-section',

    nodeValue : CDATA区域里的内容

    DocumentFragment类型(不常用)

    文档中没有此类型的标注,用来包含和控制节点,且不会像完整的文档那样占用额外资源,里面保存将来会添加到文档的节点。

    nodeType : 11,

    nodeName : '#document-fragment',

    nodeValue : null

    • 创建文档片段:document. createDocumentFragment()

    Attr类型(不常用)

    元素的属性,可用Element类型的属性方法getAttribute()、setAttribute()、removeAtttribute()操作。

    nodeType : 2,

    nodeName : 属性名,

    nodeValue : 属性值

  • 相关阅读:
    三次握手四次挥手
    OSI七层模型和TCP/IP协议族
    CSS水平垂直居中方式
    CSS9种水平居中方式
    CSS8种垂直居中方式
    scss 初学笔记 二 混合宏
    scss 初学笔记 一 变量声明 默认的样式 嵌套
    面向对象的程序设计之对象
    underscore.js 源码阅读 一 整体结构
    underscore.js 源码阅读 准备
  • 原文地址:https://www.cnblogs.com/zhenxianluo/p/6087757.html
Copyright © 2011-2022 走看看