zoukankan      html  css  js  c++  java
  • DOM

    1、简介

    DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口。

    HTML DOM 定义了访问和操作 HTML 文档的标准方法。

    DOM 以树结构表达 HTML 文档。

    2、节点

    在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。

    根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

    • 整个文档是一个文档节点
    • 每个 HTML 元素是元素节点
    • HTML 元素内的文本是文本节点
    • 每个 HTML 属性是属性节点
    • 注释是注释节

    节点树中的节点彼此拥有层级关系。

    我们常用父(parent)子(child)同胞(sibling)等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。

    3、方法

    HTML DOM 方法是我们可以在节点(HTML 元素)上执行的动作。

    HTML DOM 属性是我们可以在节点(HTML 元素)设置和修改的值。

    一些常用的 HTML DOM 方法:

    getElementsByClassName -- 返回带有指定classname的元素
    getElementById() -- 返回带有指定 ID 的元素。
    getElementsByTagName() -- 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
    getElementsByClassName() -- 返回包含带有指定类名的所有元素的节点列表。
    appendChild() -- 把新的子节点添加到指定节点。
    removeChild() -- 删除子节点。
    replaceChild() -- 替换子节点。

    通过选择器获取一个元素(querySelector)
    通过选择器获取一组元素(querySelectorAll)

    一些常用的 HTML DOM 属性:
    innerHTML -- 节点(元素)的文本值
    parentNode -- 节点(元素)的父节点
    childNodes -- 节点(元素)的子节点
    attributes -- 节点(元素)的属性节点
    insertBefore() -- 在指定的子节点前面插入新的子节点。
    createAttribute() -- 创建属性节点。
    createElement() -- 创建元素节点。
    createTextNode() -- 创建文本节点。
    getAttribute() -- 返回指定的属性值。
    setAttribute() -- 把指定属性设置或修改为指定的值。

    4、属性

    获取元素内容的最简单方法是使用 innerHTML 属性。

    nodeName 属性规定节点的名称。

    • nodeName 是只读的
    • 元素节点的 nodeName 与标签名相同
    • 属性节点的 nodeName 与属性名相同
    • 文本节点的 nodeName 始终是 #text
    • 文档节点的 nodeName 始终是 #document

    注意: nodeName 始终包含 HTML 元素的大写字母标签名。

    nodeValue 属性规定节点的值。

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

    nodeType 属性

    nodeType 属性返回节点的类型。nodeType 是只读的。

    比较重要的节点类型有:

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

     

    nodeName 属性规定节点的名称。

    • nodeName 是只读的
    • 元素节点的 nodeName 与标签名相同
    • 属性节点的 nodeName 与属性名相同
    • 文本节点的 nodeName 始终是 #text
    • 文档节点的 nodeName 始终是 #document
  • 相关阅读:
    JVM内存模型
    学习Spring Boot:(十九)Shiro 中使用缓存
    学习Spring Boot:(十八)Spring Boot 中session共享
    学习Spring Boot:(十七)Spring Boot 中使用 Redis
    学习Spring Boot:(十六)使用Shiro与JWT 实现认证服务
    学习Spring Boot:(十五)使用Lombok来优雅的编码
    学习Spring Boot:(十四)spring-shiro的密码加密
    学习Spring Boot:(十三)配置 Shiro 权限认证
    学习Spring Boot:(十二)Mybatis 中自定义枚举转换器
    学习Spring Boot:(十一) 自定义装配参数
  • 原文地址:https://www.cnblogs.com/windyrainy/p/10725238.html
Copyright © 2011-2022 走看看