DOM基础

Featherwit_Ben

已于 2023-04-27 16:41:29 修改

阅读量125

点赞数

分类专栏： NENU工作室 · 前端篇文章标签： html 前端

于 2023-04-27 16:40:00 首次发布

本文链接：https://blog.csdn.net/weixin_66849193/article/details/130406166

版权

NENU工作室 · 前端篇专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一. 认识DOM

DOM：Document Object Model 文档对象模型。

文档：表示整个HTML网页文档。
对象：表示将网页中的每一个部分都转换为一个JavaScript对象，从而用脚本进行增删减改各种操作。
模型：使用模型来表示对象之间的关系，这样方便我们获取对象。

DOM这个名词应该有两层含义，第一个是根据文档建模出来的一个树形模型，即是DOM树，这是站在浏览器方面的看法。从编程语言来看，它提供了一套操纵文档的API，也就是接口。

通过DOM模型，我们可以将HTML文档中任意元素看作一个节点，再由这些节点组成一个树状结构（DOM Tree）。

所有的节点和最终的树状结构，都有规范的对外接口，并且我们可以通过一系列的API（每一种API都有包含的属性和方法，我们是通过内部的方法来进行操作的），来对各个节点进行访问、选择、查看、修改、增加或删减样式，监听或触发事件时所要进行一系列操作等。

当然了，对于DOM来说，适用于一切结构化文档（HTML、XML），这里我们只是介绍HTML DOM，对于HTML DOM 来说，API进行了适当的简化和调整，所以HTML DOM API 并没有DOM API全面，当然了，一定要比DOM API简单。（自己写的！！）

二. DOM节点

DOM的最小组成单位就是节点（node）。DOM树就是由不同类型的节点组成。每个节点可以看成是DOM树上的叶子。

所以我们说DOM是层级结构。

在 DOM 中，节点的类型一共有7种:
Document：祖宗节点；
DocumentType： dotype标签（比如：<!DOCTYPE html>）
Element：网页的各种HTML标签（比如：<body> <h> <a> <div>）
Attribute：网页元素的属性（比如：id="XXX" class="XXX" type="XXX"）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档片段

下面我们通过例子来了解节点这个概念 :

打入document，控制台就把整个页面框起来了，说明了节点树的结构

我使用querySelector方法，查找document中的h1,控制台会自动返回从上到下的第一个h1.

我们也可以通过getElementByTagName来查找（方法有很多，比如getElementsByName等），我们这里通过标签名来查li，可以看到返回的之中，他的length为3.

根据之前的代码我们可以看看如何增加节点，如下图，我们运用了createElement方法，也体现了DOM的节点可以增加或减少的特征

同时我们也可以查看每个节点的子节点的情况，这里运用了childNode方法

同理的例子：

三. 节点的修改

先读取，再修改。

var h1=document.getElementById("a1");
h1.setAttributeNode("name",XXX);
//获取到名字修改内容

//移除引用的样式
<a id="alink" class="XXX" herf="XXX"></a>

var a=document.getElementById('alink');
a.removeAttribute('class');

添加元素的步骤：
1.创建空元素
2.设置关键属性
3.将元素添加到DOM树

parentNode.appendChild(childNode)
可用于将一个父元素追加最后一个子节点

var div = document.creatElement('div');
var txt = document.creatTextNode('hhhhhhhhhhhhhhhhhhhhhh');

div.appendChild(txt);  //将txt放在div里
document.body.appendChild(div);  //将div放在body里面

parentNode.insertBefore(newChild,existingChild)
用于在父元素中指定子节点之前添加一个新得子节点

<ul id="nenu">
    <li>首页</li>
    <li>帮助</li>
</ul>

var ul=document.getElementById('nenu');
var newLi=document.creatElement('li');

ul.insertBefore(newLi,ul.lastChild);

四. HTML DOM常用接口

这里没什么讲的，因为你要用哪个，上网上或者知识网站一查便知，我在这里列出几个常用的吧。

1、document.getElementById(id)：根据ID获取元素，如果页面中出现多个一样的ID，则返回第一次出现的；
2、document.getElementsByTagName(tagName)：根据元素标签获取，获取到的是一个数组；
3、document.getElementsByClassName(className)：根据元素类名获取，获取到的是一个数组；
4、document.getElementsByName(name)：根据 name 获取元素；
5、namedItem()：通过元素的 name 属性来获取元素；
6、document.anchors()：获取所有带 name 属性的 a 标签；
7、document.forms：获取所有的元素；
8、document.links：获取所有带 href 属性的 a 标签；
9、document.querySelector()：根据css选择器获取dom，有多个，只取第一个；
10、document.querySelectorAll()：返回满足条件的所有元素；

11、getElementsByTagName():返回当前节点的指定标签名后代节点；
12、childNodes:表示当前节点的所有子节点，包括文本节点在内的所有节点；
13、firstChild:表示当前节点的第一个子节点；
14、lastChild:表示当前节点的最后一个子节点；

修改CSS样式：document.querySelector().style.你想要修改的样式（比如color）= “”

例如：document.getElementById("p2").style.color = "blue";

如果你的css文件中有一个该节点没有使用的title样式，为了使用这个样式，我们应该这样做： document.querySelector("h1").classList.add("title")，这样我们的h1会使用title的所有样式

我们为classList 属性还定义如下方法：

add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value)：表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。
remove(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。（！！这个可有用了。想象一下，你点一个按钮，点一下变成你修改的红色啊、放大啊等等，再点一下修饰消除，再点一下又出现了，再点一下又消失了）

innerText

修改节点的innerText，会删除节点里面的所有内容，改为修改的值

要在后面添加文本内容，请这样写：
var textnode=document.createTextNode("helloMyLove");    //创建文本节点
xxx.appendChild(textnode);      //添加文本节点

或者联成一句：
xxx.appendChild(document.createTextNode("helloMyLove");

close()关闭文档
createDocumentFragment()
createElement()
createTextNode()创建一个文本节点
execCommand()写一个富文本编辑器时可以用到
exitFullscreen()退出全屏
getElementById()
getElementsByClassName()
getElementsByName()通过name属性
getElementsByTagName()通过标签名
getSelection()回去用户选中的文本
hasFocus()用户是否Focus到上面
open()
querySelector()通过选择器获取，返回一个选择器（数组的形式，不过是伪数组）
querySelectorAll()通过选择器获取，返回所以选择器（数组的形式，不过是伪数组）
write()写
writeln()写一行

五 .事件类型

第一种：鼠标事件

click：单击鼠标按钮时触发；

dblclick：当用户双击主鼠标按钮时触发；

mousedown：当用户按下鼠标还未弹起时触发；

mouseup：当用户释放鼠标按钮时触发；

mouseover：当鼠标移到某个元素上方时触发；

mouseout：当鼠标移出某个元素上方时触发；

mousemove：当鼠标指针在元素上移动时触发；

mouseenter：在鼠标光标从元素外部首次移动至元素范围内触发，不参与冒泡；

mouseleave：鼠标移出；

第二种：键盘事件

keydown：当用户按下键盘上任意键时触发，如果按住不放，会重复触发；

keyup：当用户释放键盘上的键触发；

keypress：当用户按下键盘上的字符键时触发，如果按住不放，会重复触发；

第三种：HTML事件

load：当页面完全加载后在window上面触发，或当框架集加载完毕后在框架集上触发；

unload：当页面完全卸载后在window上面触发，或当框架集卸载后在框架集上触发；

select：当用户选择文本框（input或textarea）中的一个或多个字符触发；

change：当文本框（input或textarea）内容改变且失去焦点后触发；

input：输入；

focus：当页面或者元素获得焦点时在window及相关元素上面触发；

blur：当页面或元素失去焦点时在window及相关元素上触发；

submit：当用户点击提交按钮在<form>元素上触发；

reset：当用户点击重置按钮在<form>元素上触发；

resize：当窗口或框架的大小变化时在window或框架上触发；

scroll：当用户滚动带滚动条的元素时触发；

六. 举一个自己写的小例子

我们要做一个按钮，按一下就变色，再按一下变回原来颜色，继续按下去的话，重复该现象

<style>
        .title {
            color:aquamarine;
        }
    </style>

我们这里用了事件监听addEventListener（“事件类型”，动作函数），用来存放动作

Featherwit_Ben

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM基础

Document Object Model 文档对象模型。DOM这个名词应该有两层含义，第一个是根据文档建模出来的一个树形模型，即是DOM树，这是站在浏览器方面的看法。从编程语言来看，它提供了一套操纵文档的API，也就是接口。通过DOM模型，我们可以将HTML文档中任意元素看作一个节点，再由这些节点组成一个树状结构（DOM Tree）。
复制链接

扫一扫