• DOM 基础知识


    DOM树中的元素节点:

    节点的属性:

    x.nodeValue 节点对象x的值(只读)

  • 元素节点的 nodeName 与标签名相同
  • 属性节点的 nodeName 是属性的名称
  • 文本节点的 nodeName 永远是 #text
  • 文档节点的 nodeName 永远是 #document

    x.nodeName 节点对象x的名称

  • 元素节点的 nodeValue 是 undefined
  • 文本节点的 nodeValue 是文本自身
  • 属性节点的 nodeValue 是属性的值

    x.nodeType 节点对象x的类型(只读)

    元素类型 节点类型
    元素 1
    属性 2
    文本 3
    注释 8
    文档 9

    节点定位:

    x.parentNode 节点对象x的父节点
    x.childNodes 节点对象x的子节点
    x.firstChild 
    x.lastChild
    x.nextSibling
    x.previousSibling

    NodeA.firstChild = NodeA1 
    NodeA.lastChild = NodeA3 
    NodeA.childNodes.length = 3 
    NodeA.childNodes[0] = NodeA1 
    NodeA.childNodes[1] = NodeA2 
    NodeA.childNodes[2] = NodeA3 
    NodeA1.parentNode = NodeA 
    NodeA1.nextSibling = NodeA2 
    NodeA3.prevSibling = NodeA2 
    NodeA3.nextSibling = null 
    NodeA.lastChild.firstChild = NodeA3a 
    NodeA3b.parentNode.parentNode = NodeA
    DOM 查找及操作节点的方法:

  • insertBefore()  在参考子节点之前插入一个新的子节点.如果参考的子节点为null,则新的子节点将作为调用节点的最后一个子节点插入。

    replaceChild()  在childNodes集合种使用指定的newChild来代替oldChild;如果代替成功,则返回oldChild;如果newChild是null,则只需删除oldChild即可。

    removeChild() 从节点的ChildNodes集合中删除removeChild指定的节点,如果删除成功,则返回删除的子节点。
    appendChild() 添加一个新节点到childNodes集合的末尾,如果成功,则返回新节点。

    cloneNode() 创建一个新的、复制的节点,并且如果传入的参数是true时,还将复制子节点,如果节点是一个元素,那么还将复制相应属性,返回新的节点。
    getElementById()  根据Id查找元素节点
    getElementsByTagName()   根据TagName查找元素节点
    createElement()  创建新的元素节点
    createTextNode()  创建新的文本节点

    getAttribute() 获取属性的值

    setAttribute() 设置属性的值

    节点列表:

    由 getElementsByTagName() 方法和 childNodes 属性返回。

    x.length  节点列表x的长度(节点的数目)

    属性节点列表:

    元素节点的 attributes 属性返回属性节点的列表。

    x.length  属性节点列表的长度(属性节点的数目)

    x.getNamedItem()  返回属性节点

    注意:
    <year>2005</year>,元素节点 <year>,拥有一个值为 "2005" 的文本节点。

    "2005" 不是 <year> 元素的值!文本总是存储在文本节点中。


     

  • 相关阅读:
    11 数据的增删改
    10 外键的变种 三种关系
    09 完整性约束
    03 body标签中的相关标签
    02 body标签中的相关标签
    01 HTML介绍和head标签
    08 数据类型(2)
    07 数据类型
    06 表的操作
    偶遇RecyclerView内部Bug
  • 原文地址:https://www.cnblogs.com/niuniu1985/p/1808226.html
  • Copyright © 2020-2023  润新知