Js--DOM详解

Js--DOM详解

博客说明

文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！

概念

• Document Object Model 文档对象模型

  • 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

• W3C DOM 标准被分为 3 个不同的部分：

  • 核心 DOM - 针对任何结构化文档的标准模型

    • Document：文档对象

    • Element：元素对象

    • Attribute：属性对象

    • Text：文本对象

    • Comment:注释对象

    • Node：节点对象，其他5个的父对象

  • XML DOM - 针对 XML 文档的标准模型

  • HTML DOM - 针对 HTML 文档的标准模型

核心DOM模型

Document：文档对象

1. 创建(获取)：在html dom模型中可以使用window对象来获取
   1. window.document
   2. document
2. 方法：
   1. 获取Element对象：
      1. getElementById() ： 根据id属性值获取元素对象。id属性值一般唯一
      2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
      3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
      4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
   2. 创建其他DOM对象： createAttribute(name)

        createComment()
        createElement()
        createTextNode()

3. 属性

Element：元素对象

1. 获取/创建：通过document来获取和创建
2. 方法：
   1. removeAttribute()：删除属性
   2. setAttribute()：设置属性

• Node：节点对象，其他5个的父对象
  • 特点：所有dom对象都可以被认为是一个节点
  • 方法：
    • CRUD dom树：
      • appendChild()：向节点的子节点列表的结尾添加新的子节点。
      • removeChild() ：删除（并返回）当前节点的指定子节点。
      • replaceChild()：用新节点替换一个子节点。
  • 属性：
    • parentNode 返回节点的父节点。

HTML DOM

1. 标签体的设置和获取：innerHTML

2. 使用html元素对象的属性

3. 控制元素样式

   1. 使用元素的style属性来设置

           //修改样式方式1
           div1.style.border = "1px solid red";
           div1.style.width = "200px";
           //font-size--> fontSize
           div1.style.fontSize = "20px";

   2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

感谢

黑马程序员

以及勤劳的自己