DOM---文档对象模型

最新推荐文章于 2023-11-25 11:56:04 发布

Michelle&姐姐

最新推荐文章于 2023-11-25 11:56:04 发布

阅读量339

点赞数

分类专栏：前端开发文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_62859027/article/details/125362350

版权

前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一·文档对象模型

1.什么是文档对象模型

DOM（Document Object Model,文档对象模型）用于将HTML文档描述成文档对象，对该对象被组织成一个个节点组成的树形结构。DOM提供了一系列的节点操作相关的API，用于访问和处理元素。（注解：API，API一般指应用程序编程接口。 API之主要目的是提供应用程序与开发人员以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。）
HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

2.DOM的作用

1.获取节点
DOM获取节点后可以对该节点中的HTML属性进行具体的改写

<label>用户名：
        <input id="username-input" type="text"/>
    </label>
    <script>
        var userName=document.getElementById("username-input");
        var userValue=userName.value;
        alert(userValue);
    </script>

2.监听事件
DOM可以监听事件并作出响应，例如用户的单击、改变窗口大小、表单提交等操作
3.DOM树
在这里插入图片描述
通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：
JavaScript 能改变页面中的所有 HTML 元素
JavaScript 能改变页面中的所有 HTML 属性
JavaScript 能改变页面中的所有 CSS 样式
JavaScript 能删除已有的 HTML 元素和属性
JavaScript 能添加新的 HTML 元素和属性
JavaScript 能对页面中所有已有的 HTML 事件作出反应
JavaScript 能在页面中创建新的 HTML 事件

二.DOM操作

1.获取元素

方法	说明
getElementById（）	通过元素id属性来获取元素
getElementsByName（）	根据元素的name属性来获取元素
getElementsByTagName （）	通过元素标签名来获取元素
getElementByClassName （）	通过CSS类名来获取元素
querySelctorAll（）	通过选择器获取所有元素
querySelctor（）	通过选择器来获取第一个元素

getElementById（）

可以通过元素id值来获取元素，由于元素的id值具有唯一性，所以在获取单一元素的时候推荐使用这种方式，该方法返回的是object类型

<div id="name"></div>
<script>
 var name=document.getElementById("name");
        console.log(name);
</script>

getElementsByName()

该方法可以通过name属性来获取元素，通常使用在HTML表单中，返回值为NodeList对象

 <form name="level" action="service/form_action" method="post">
        <label><input type="radio" name="nava" value="junior"/>初级</label>
        <label><input type="radio" name="nava" value="senior"/>高级</label>
    </form>
<script>
	  var name=document.getElementById("name");
        console.log(name);
        var formNodeList=document.getElementsByName("level")
        console.log(formNodeList);
        var radio=document.getElementsByName("nava");
        console.log(radio);
</script>

在这里插入图片描述

getElementsByTagName（）

该方法用于获取指定的标签名的火元素，返回值为HtmlCollection

<h1>通过标签名查找 HTML 元素</h1>

<p>Hello World!</p>

<p>本例演示 <b>getElementsByTagName</b> 方法。</p>

<p id="demo"></p>

<script>
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 
'第一段中的文本 (index 0) 是：' + x[0].innerHTML;
</script>

getElementsByClassName（）

该方法通过css选择器来获取元素，该方法的参数可以是一个或者多个，多个类名采用空格分开，不分前后，返回值为HtmlCollection

<h1>通过类名查找 HTML 元素</h1>

<p>Hello World!</p>

<p class="intro">DOM 很有用。</p>

<p class="intro">本例演示 <b>getElementsByClassName</b> 方法。</p>

<p id="demo"></p>

<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = 
'class ="intro" 的第一段（索引 0）：' + x[0].innerHTML;
</script>

querySelectorAll（）和 querySelector（）

选择器获取所有的元素节点，querySelector获取第一元素节点

2.遍历元素

在DOM操作中经常会需要查找某个元素的其他相关元素，比如它的父元素节点、兄弟元素节点或者子节点，Document和Element对象都提供了一些属性来进行遍历元素。

属性	功能
parentNode	当前节点的父节点
childNode	当前节点的直接子节点
firstChild	当前节点的第一个子节点
lastChild	当前节点的最后一个子节点
previousSibling	当前节点的前一个兄弟节点
nextSibling	当前节点的下一个兄弟节点
nodeType	当前节点的类型
nodeName	节点名
nodeValue	节点值

3.访问元素属性

1.访问内置属性

对于内置属性，可以通过属性名对于属性进行值的或取和设定

<img id="banner" alt="blank" src="banner.jpg">
<script>
 var banner=document.getElementById("banner");
        console.log(banner.id,banner.alt,banner.src);
        bannerImg.src="new.jpg";
        console.log(banner.id,banner.alt,banner.src);
</script>

2.自定义访问属性

HTML5中支持通过data-设置自定属性。

getAttribute获取属性
setAttribute来设置属性
hasAttribute判断属性是否存在
removeAttribute删除该属性

3.访问和修改文档

访问和修改文档内容可以通过innerHTML属性完成，该属性可以使包含HTML的字符串

<!DOCTYPE html>
<html>
<body>

<h2>我的第一张网页</h2>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

上述代码实现了通过js来改变html的内容

4.创建和删除元素

创建新元素分为两个步骤：首先通过createElement（）方法创建元素，然后通过appendChild（）方法添加新的节点

<form id="myForm"></form>
<script>
	let newNode=document.createElement("input");  //创建元素
	newNode.type="text";
	newNode.name="username";//定义元素属性
	document.getElementById("myForm").appendChild(newNode);//添加新的节点
</script>

5.克隆节点

可以通过cloneNode（）对节点进行赋值，如果参数为true则克隆本节点及其所有后代节点，如果参数为false，只克隆本节点

<script>
 let ul=doucument.getElementById(" ");
 let ulClone=ul.cloneNode(true);//克隆本节点以及子节点
  let ulClone=ul.cloneNode(false);//只克隆本节点
</script>

6.删除节点

可以通过removeChild（）方法进行节点删除

<script>
parentNode.removeChild(childrenNode);  //先定位父节点，再删除子节点
someNode.parentNode.removeChild(someNode);//无需定位父节点，直接删除子节点
</script>

4.访问和修改样式

1.style属性

注意：

CSS中的font-size和background-color属性对应着js中的fontSize和backgroundColor属性，通常是去掉属性名中的下划线，转换为驼峰命名法。属性取值未保留字时时一种特例，例如float为js的保留字，所以需要用style.cssFloat设置
所有的属性都是字符串，如果设计大小、定位等相关属性，必须要包含单位

<script>
	p.style.fontSize="18px";
	p.backgroundColor="red";
</script>

2.cssText属性

要修改多个属性的时候使用
p.style.cssText=“font-size:18px;background-color:18px”;

3.getComputedStyle（）方法

style属性只能获取行内样式，使用getComputedStyle（）方法，可以获得一个元素

三·DOM事件

1.事件概述

各种鼠标、键盘操作或者浏览器自身加载资源等状态，都是通过事件机制实现JavaScript和HTML的交互。

事件目标：触发此事件的对象
事件类型：是指具体发生了什么事件，单击事件类型、鼠标移动事件类型
事件监听程序：是指响应事件的处理函数
事件对象：是指包含事件详细信息的对象
事件流模型：事件的传播方式，自内向外的冒泡，自外而内的捕获。

2.事件类型

DOM事件可以分为文档事件、用户界面事件、鼠标事件、键盘事件、表单事件等

文档事件：load unload errro等
用户界面事件：focus、blur（失去焦点）、resize、scroll等事件
鼠标事件：onclick、mousedown、mousemove等事件
键盘事件：keydown、keyup、key-press等事件
表单事件：input、submit等事件

3.事件处理

1.HTML行内注册

注册事件最简单的方式就是对元素的事件属性进行赋值，在事件名上加上on

<button onclick="show()">按钮</button>
<script>
	function show(){
	alert("hello!");
	}
</script>

2.JavaScript DOM0注册

将函数名赋值给元素的事件属性

<button id="mybtn">按钮</button>
<script>
	var btn=doucument.getElementById("mybtn");
	btn.onlick=show;
	function show(){
	alert("hello!");
</script>

3.JavaScript DOM2级注册

该方法可以注册多个事件，可以用addEventListener（）方法进行事件监听，removeEventListener（）来取消监听

4.事件对象

当事件发生是浏览器会产生事件对象event，可以在事件处理函数中定义参数接受event对象，它提供了事件类型、目标等事件相关信息。

对象	说明
type	事件类型，如load、click等
target	事件目标：直接触发此事件的元素
currentTarget	事件目标：直接元素或者是事件传播中的父元素
eventPhase	返回事件传播的当前阶段，取值为：捕获、目标、冒泡阶段
clientX client Y	鼠标坐标，相对于浏览器可视区
screenX screenY	鼠标坐标，相对于屏幕
pageX pageY	鼠标坐标，相对于页面
preventDefault	不要执行与事件相关联的默认动作
stopPropagation	阻止冒泡

四·总结

学了JavaScript的DOM事件以后，就可以实现用户的交互方式，比如表单的注册，信息数据的收集以及使用JavaScript对HTML进行页面的修改，但是该部分内容对于我们来说稍微有一点复杂，还需要再次深入学习。

Michelle&姐姐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM---文档对象模型

DOM（Document Object Model,文档对象模型）用于将HTML文档描述成文档对象，对该对象被组织成一个个节点组成的树形结构。DOM提供了一系列的节点操作相关的API，用于访问和处理元素。（注解：API，API一般指应用程序编程接口。 API之主要目的是提供应用程序与开发人员以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。）HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。1.获取节点DOM获取节点后可以对该节点中的HTML属性进行具体的改写
复制链接

扫一扫