学习笔记（九）JavaScript DOM（文档对象模型）

最新推荐文章于 2024-08-11 18:40:36 发布

370370370370370

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量225

点赞数 1

文章标签： javascript dom

本文链接：https://blog.csdn.net/qq_36486067/article/details/105902039

版权

学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Document Object Model（文档对象模型）

DOM是针对HTML和XML文档的一个API（Application Programming Interface应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
HTML DOM 定义了访问和操作HTML文档的标准方法。
要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
我们可以通过JavaScript操作DOM，可以对节点实现增删改查操作，可以动态添加标签，属性等。

什么是节点

HTML 文档中的每个成分都是一个节点。

节点类型
DOM 是这样规定的：
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点
节点层次关系-节点彼此都有等级关系。
HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
<head> 和的父节点是节点，文本节点 “Hello world!” 的父节点是
节点。

<head> 节点有一个子节点：<title> 节点。<title> 节点也有一个子节点：文本节点 “DOM Tutorial”。
当节点分享同一个父节点时，它们就是同辈（同级节点）。比方说，<h1> 和<p>是同辈，因为它们的父节点均是 <body> 节点。
节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点。
节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。比方说，所有的文本节点都可把 <html> 节点作为先辈节点。
节点属性

节点 nodeName nodeValue nodeType
元素标签名称属性包含文本元素：1；属性：2；文本：3
文本 #text 不可用 9
注释 #comment 包括注释内容 8

节点	nodeName	nodeValue	nodeType
元素	标签名称	属性包含文本	元素：1；属性：2；文本：3
文本	#text	不可用	9
注释	#comment	包括注释内容	8

DOM节点

获取Dom元素	描述
document.getElementById()	以id名获取标签，返回带有指定 id名的标签
document.getElementsByTagName()	以标签名获取标签，可返回带有指定标签名的对象的集合。
document.getElementsByName()	以name名获取标签，返回带有指定 name名的标签的对象集合。
document.getElementsByClassName	以Class名获取标签，返回带有指定 Class名的标签的对象集合。
document.querySelector	根据标签名获取第一个元素
document.querySelectorAll	获取所有标签名的元素，返回符合条件的标签的对象集合。

节点遍历	描述
childNodes	所有子节点，获取所有子节点（包括注释）
children	所有是标签类型的子节点获取所有子元素
parentNode	获取已知节点的父节点
firstElementChild	第一个子节点（元素）
firstChild :	第一个子节点
lastElementChild	最后一个子节点（元素）
lastChild	最后一个子节点
nextElementSibling	下一个兄弟节点（元素）
nextSibling	下一个兄弟节点
previousElementSibling	上一个兄弟节点
previousSibling	上一个兄弟节点

创建节点	描述
document.createElement(“标签名”)	创建新元素
document.createTextNode("")	创建文本节点

插入节点	描述
appendChild(node)	向childNodes末尾插入一个节点node
insertBefore(newElement,targetElement)	向targetNode之前插入节点node

替换节点	描述
replaceChild(newNode,oldNode)	newNode替换节点oldNode

删除节点	描述
removeChild(node)	移除父节点的某个子节点
remove()	移除当前节点

复制节点	描述
cloneNode(boolean)	复制一个节点

属性

任何一个DOM元素，有两种属性，一个是对象属性，一个是标签属性
当遇到标签属性值和对象属性值冲突时，以对象属性值为准

标签属性

把写在标签上的属性称为标签属性
设置标签属性：元素.setAttribute(属性名,属性值);
- 属性名的命名不能使用驼峰式命名，通常命名时使用-区分两个单词:toggle-target
- 属性值不能出现大写，并且必须是字符串：div.setAttribute(“abc”,“20”);
- 设置标签属性以后，可以用于多种数据使用，可以用于获取标签元素等操作
获取标签属性值：元素.getAttribute(属性名)
删除标签属性：元素.removeAttribute(属性名);

所有的标签单属性值和属性名相同

var ck=document.querySelector("input");
    ck.setAttribute("checked","checked");
    ck.setAttribute("checked","");

对象属性

对象属性并不会显示在标签上
设置对象属性：点语法
- ```
var div=document.querySelector("div");div.a=10;
```
- 我们认为所有DOM元素都是object，所以设置属性都是按照对象属性来设置
获取对象属性值：div.a;
查看DOM对象的属性：console.dir(div);

两者关系

所有标签属性并不是都有对应的对象属性
其中标签属性里有对应的对象属性有：
- id title
- 图片 src width height 是指图片的原始图片宽度，也可以设置更改，与标签属性一致
- 表单元素 value name checked placeholder 这些标签属性和对象属性也是一致的
- 超链接 href 这些标签属性和对象属性也是一致的
其中只可以设置标签属性的有：class

标签样式

style属性可以设置字符串的方式增加行内属性

div.style="width:50px;height:50px;background-color:red;";

style属性也是设置对象属性设置方式，修改行数样式属性

div.style.width="50px";
div.style.height="50px";
div.style.backgroundColor="red";

这个只能获取css的行内样式，这种方法将无法取到css树的样式，
```
console.log(div.style.width);
```

宽高

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uPLtU1hh-1588478399795)(C:\Users\370370370370\AppData\Roaming\Typora\typora-user-images\image-20200503104111766.png)]$

获取方式

<div></div>
<script type="text/javascript">

    console.log(div.clientWidth, div.clientHeight);
    console.log(div.offsetWidth, div.offsetHeight);
    console.log(div.scrollWidth, div.scrollHeight);

    console.log(document.body.clientWidth, document.body.clientHeight);
    console.log(document.body.offsetWidth, document.body.offsetHeight);
    console.log(document.body.scrollWidth, document.body.scrollHeight);

    console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
    console.log(document.documentElement.offsetWidth, document.documentElement.offsetHeight);
    console.log(document.documentElement.scrollWidth, document.documentElement.scrollHeight);
</script>

位置

在这里插入图片描述

获取元素的矩形界限范围

IE8以后才有的方法

获取方式：

var rect=div1.getBoundingClientRect();
console.log(rect);

属性解释

x 父容器到元素左边框的位置

y 父容器到元素上边框的位置

width offsetWidth

height offsetHeight

top 视觉窗口到元素上边框的距离

left 视觉窗口到元素左边框的距离

bottom 视觉窗口到元素上边框的距离

right 视觉窗口到元素左边框的距离

370370370370370

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
学习笔记（九）JavaScript DOM（文档对象模型）

Document Object Model（文档对象模型）DOM是针对HTML和XML文档的一个API（Application Programming Interface应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。HTML DOM 定义了访问和操作HTML文档的标准方法。要改变页面的某个东西，JavaScript 就需要获得对 ...
复制链接

扫一扫