Dom总结

最新推荐文章于 2023-09-05 09:26:32 发布

我又懂了

最新推荐文章于 2023-09-05 09:26:32 发布

阅读量143

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/qq_39194067/article/details/103553627

版权

Js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

- 什么是Dom
Dom全称为Documennt Object Moduel 意为文档对象模型，DOM 定义了访问 HTML 和 XML 文档的标准：W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

W3C DOM 标准被分为 3 个不同的部分：
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML文档的标准模型

特点：文档中每一个东西都是节点，文档也是一个document节点，同时也是一个document对象（当页面载入到浏览器中时），除此之外document对象还是html的根节点

节点父、子和同胞
节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子
同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分，以及节点之间的关系：
在这里插入图片描述
html节点分类：
元素节点　　Node.ELEMENT_NODE(1)
属性节点　　Node.ATTRIBUTE_NODE(2)
文本节点　　Node.TEXT_NODE(3)
CDATA节点 Node.CDATA_SECTION_NODE(4)
实体引用名称节点 Node.ENTRY_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)
DTD声明节点 Node.NOTATION_NODE(12)

在这里插入图片描述

<!DOCTYPE html>  
<html lang="en">  //html根元素节点

<head>   //元素节点 head
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>  //元素节点 title
    <style>
        .container {  //属性节点  Attr
            width: 100%;
            height: 3300px;
            background-color: #014e82;
        }
 
    </style>
</head>

<body>  //元素节点 body 
	<!-- 主体内容 --> //注释节点 comment
	//	 属性节点Attr		文本节点text
    <div class="container">1234</div>  //元素节点 div
</body>

</html>

2. 获取节点

通过选择器获取节点
document.getElementsByClassName(） 参数：类名字符串 'className'
通过类名获取元素节点，因为类名不唯一，所以会获取到一个元素数组集合，通过index可以获取到确定的某个节点。
document.getElementsByTagName(); 参数：标签名 'div'
通过标签名获取到每个节点元素，同样的也会获取到一个元素数组集合
document.getElementById(); 参数 : id类名 'idName'
通过id名获取到节点元素，因为id名是唯一的所以获取的节点也是唯一的不再是一个元素数组集合。
document.getElementsByName(); 参数 : name属性值 ‘name’s name’
该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。
document.getElementById(); 参数 : id类名 'idName'
通过id名获取到节点元素，因为id名是唯一的所以获取的节点也是唯一的不再是一个元素数组集合。
document.querySelector(); 参数 : css选择器类名字符串 ‘nav>.list’
匹配指定 CSS 选择器元素的第一个子元素。如果想要所有的子元素需要通过**document.querySelectorAll();**获取。
通过关系获取节点
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
parenEl.children() 获取所有的子节点集合
parentEl.firstChild() 获取父元素下的第一个子元素
parentEl.lastChild() 获取父元素下的最后一个子元素

<!DOCTYPE html>  
<html lang="en">  //html根元素节点
<head>   //元素节点 head
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>  //元素节点 title
    <style>
        .container {  //属性节点  Attr
            width: 100%;
            height: 3300px;
            background-color: #014e82;
        }
    </style>
</head>

<body>  //元素节点 body 
	<!-- 主体内容 --> //注释节点 comment
	//	 属性节点Attr		文本节点text
    <div class="container">1234</div>  //元素节点 div
</body>

</html>
  <script>
       	a = document.getElementsByClassName('container');  //通过class类名 获取节点
        a = document.getElementsByTagName();
        a = document.getElementById();
        a = document.getElementsByName();
    </script>

一些 DOM 对象方法
这里提供一些您将在本教程中学到的常用方法：

方法描述
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。

我又懂了

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Dom总结

- 什么是DomDom全称为Documennt Object Moduel 意为文档对象模型，DOM 定义了访问 HTML 和 XML 文档的标准：W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。W3C DOM 标准被分为 3 个不同的部分：- 核心 DOM - 针对任何结构化文档的标准模型- XML DOM - 针对 ...
复制链接

扫一扫

专栏目录