DOM概述-CSDN博客

本文链接：https://blog.csdn.net/ChangUng/article/details/140412327

学过js语法基础我们就开始学习Web APls了我们先要介绍的是BOM也就是页面文档对象模型

，我大致分为三个重要板块来写获取元素事件基础和操作元素三个方面来大致描述DOM

首先我们先要了解什么是DOM

简单来说

DOM（‌文档对象模型）‌是一种编程接口，‌它将网页转换为JavaScript对象，‌使得可以使用脚本进行各种操作，‌如增删内容。‌浏览器根据DOM模型将结构化文档（‌如HTML和XML）‌解析成一系列的节点，‌再由这些节点组成一个树状结构（‌DOM树）‌。‌DOM树中的每个节点可以看作是文档树的一片叶子，‌具有规范的对外接口。‌DOM的模块化意味着开发人员必须知道自己希望使用的特性是否受正在使用的DOM实现所支持。‌（DOM树）

一、获取元素

现在获取元素的方法大分为四种

1、根据标签名获取元素

二、通过标签获取元素

三、根据HTML5新增方法获取元素

四、获取特殊元素

二、事件基础

1、事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解：触发--- 响应机制。网页中的每个元素都可以产生某些可以触发 JavaScript 的事件。

例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

简单举个例子：点击按钮的时候就会出现这个一个浏览器弹出框

2、事件大三要素

1. 事件源：触发事件的元素。

2. 事件类型：如click单击事件。

3. 事件处理程序：事件触发后要执行的代码（函数形式）。

以上面的例子来看事件源是button的按钮，事件的类型是click点击事件，在控制台上显示的是事件处理程序。

3、常见的鼠标事件

三、操作元素

1、改变元素的内容

element.innerHTML

起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

element.innerText

从起始位置到终止位置的内容, 但它去除 html 标签，同时空格和换行也会去掉

2、常用属性操作

1. innerText、innerHTML 改变元素内容

2. src、href

3. id、alt、title

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        var div=document.querySelector('div');
        div.onclick=function()
        {
            this.style.backgroundColor='blue';
            this.style.width='300px';
        }
    </script>
</body>
</html>

3、表单属性操作

type、value、checked、selected、disabled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
    <script>
        const bt=document.querySelector('button')
        bt.onclick=function(){
            bt.disabled=true//点击或不能再次点击
        }
    </script>
</body>
</html>

4、样式属性操作

element.style.行内样式操作

注： 1. JS 里面的样式采取驼峰命名法比如 fontSize、 backgroundColor。

2. JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input{
            color: #999;
        }
    </style>
</head>
<body>
    <input type="text" value="手机">
    <script>
        var input=document.querySelector('input');
        input.onfocus=function()
        {
            if(this.value=='手机')
            {
                this.value=' ';
                this.style.Color='#333'
            }
        }
        input.onblur=function()
        {
            if(this.value==' ')
            {
                this.value='手机';
            }
        }
    </script>
</body>
</html>

element.className.类名样式操作

注：1. 如果样式修改较多，可以采取操作类名方式更改元素样式。

2. class因为是个保留字，因此使用className来操作元素类名属性

3. className 会直接更改元素的类名，会覆盖原先的类名。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            background-color: aqua;
            width: 100px;
            height: 100px;
        }
        .first{
            font-weight: 700;
        }
        .change{
            background-color: green;
            font-size: 25px;
            color: aliceblue;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="first">文本</div>
    <script>
        var div=document.querySelector('div');
        div.onclick=function()
        {
            //样式修改少的时候可以
            // this.style.backgroundColor='green';
            // div.style.fontSize='25px';
            div.className='change first';//通过修改class类名来修改样式  允许有多个类名
            div.classList.add='changes';
        }
    </script>
</body>

</html>

四、自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

1、设置属性

H5规定自定义属性data-开头做为属性名并且赋值

2、获取属性

1. 兼容性获取 element.getAttribute(‘data-index’);

2. H5新增 element.dataset.index 或者 element.dataset[‘index’] ie11才开始支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="demo" index="1" class="nav"></div>
    <script>
        var div=document.querySelector('div');
        console.log(div.id);//获取id名
        console.log(div.getAttribute('id'));
        console.log(div.index);//获取不了自定义属性
        console.log(div.getAttribute('index'));//获取自定义属性

        //设置属性
        div.id='text';//修改属性名
        div.setAttribute('index',3);//修改自定义属性的值

        div.className='navs';
        div.setAttribute('class','box');

        //删除属性
        div.removeAttribute('index');
    </script>
</body>
</html>

五、节点操作

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。 HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除

1、节点概述

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性

元素节点 nodeType 为 1

属性节点 nodeType 为 2

文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）

2、节点层级

1、父节点（node.parentNode）

parentNode 属性可返回某节点的父节点，注意是最近的一个父节点如果指定的节点没有父节点则返回 null

2、子节点(parentNode.childNodes)

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。

注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>10-子节点操作</title>
</head>
<body>
	<!-- 节点的优点 -->
	<div>我是div</div>
	<span>我是span</span>
	<ul>
		<li>我是li</li>
		<li>我是li</li>
		<li>我是li</li>
		<li>我是li</li>
	</ul>
	<ol>
		<li>我是li</li>
		<li>我是li</li>
		<li>我是li</li>
		<li>我是li</li>
	</ol>
	<div class="demo">
		<div class="box">
			<span class="erweima">×</span>
		</div>
	</div>
	<script type="text/javascript">
		// DOM 提供的方法（API）获取
		var ul = document.querySelector('ul');
		var lis = ul.querySelectorAll('li');
		console.log(lis);
		// 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
		console.log(ul.childNodes);
		console.log(ul.childNodes[0].nodeType);//文本节点为3
		console.log(ul.childNodes[1].nodeType);//元素节点为1
		for(var i=0;i<ul.childNodes.length;i++)
		{
			if(ul.childNodes[i]==1)
			{
				console.log(ul.childNodes[i]);
			}
		}
		console.log(ul.children);
	</script>
</body>

</html>