zoukankan      html  css  js  c++  java
  • 理解HTML DOM

    DOM(Document Object Model)全称文档对象模型。DOM其实是JavaScript操作网页的一套API接口,定义了访问和操作HTML文档的标准。定义了所有HTML元素的对象和属性,以及访问他们的方法。浏览器会根据DOM模型,将结构化文档解析成一系列的节点,再由这些节点组成一个树状结构,所以它的作用是将网页转为一个个节点对象,从而可以用脚本对其进行各种操作获取,修改,添加或删除HTML元素。

    1.DOM节点

    文档对象是由不同类型的节点对象组成的,所以要操作文档对象,我们得知道有哪些节点对象。节点对象都有一个nodeType属性,通常是由一个数值常量表示

    (1)常见的节点对象:

    ELEMENT_NODE(1),元素节点对象
    ATTRIBUTE_NODE(2),属性节点对象
    TEXT_NODE(3),文本节点对象
    COMMENT_NODE(8),注释节点对象
    DOCUMENT_NODE(9),文档节点对象
    DOCUMENT_TYPE_NODE(10),文档类型节点对象
    DOCUMENT_FRAGMENT_NODE(11),文档片段节点对象
    

    (2)节点对象之间的关系

    整个文档对象,是由不同的节点对象组成,这些节点之间都存在在关系,常见的关系有:

    parentNode,父节点
    previousSibling,前一个兄弟节点
    nextSibling,后一个兄弟节点
    firstChild,第一个子节点
    lastChild,最后一个字节点
    childNodes,子节点集合
    ownerDocument, 顶层文档对象,即document对象。
    parentElement,返回当前节点的父Element节点
    

    (3)操作节点对象的方法

    appendChild(node);向childNodes列表的末尾添加一个节点
    insertBefore(newnode,position);往childNodes列表中的某个固定的位置插入一个节点,要是参照节点为null,默认加在末尾
    replaceChild(newnode,position)替换某个节点
    removeChild(node);删除某个节点
    cloneNode(true/false);克隆对象
    contains(),接受一个节点作为参数,返回一个布尔值,表示参数节点是否为当前节点的后代节点。
    isEqualNode(),
    normalize(), 清理当前节点内部的所有Text节点
    hasChildNodes()
    
  • 相关阅读:
    linux内核中GNU C和标准C的区别
    linux内核中GNU C和标准C的区别
    Getting start with dbus in systemd (02)
    Getting start with dbus in systemd (01)
    Getting start with dbus in systemd (03)
    物理内存相关的三个数据结构
    数据类型对应字节数(32位,64位 int 占字节数)
    Linux kernel 内存
    共模电感的原理以及使用情况
    [原创]DC-DC输出端加电压会烧毁
  • 原文地址:https://www.cnblogs.com/YeChing/p/6281405.html
Copyright © 2011-2022 走看看