JavaScript DOM 学习笔记

幸愉聊信奥

已于 2022-02-21 17:24:21 修改

阅读量825

点赞数 3

分类专栏： # JavaScript 文章标签： javascript 学习前端

于 2022-02-21 17:23:53 首次发布

本文链接：https://blog.csdn.net/Edviv/article/details/123016009

版权

JavaScript 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

Dom 基础

Dom 基本概念

DOM 全称 Document Object Model 模型
DOM 操作，可以简单理解成元素操作
在这里插入图片描述

节点类型

JavaScript 中，DOM 节点共 12 种类型，常见的三种是元素节点、属性节点、文本节点

节点类型	$n o d e T y p e$ 值
元素节点	1
数学节点	2
文本节点	3

节点跟元素是不一样的概念，节点是包括元素的
节点类型注意👇
一个元素就是一个节点，这个节点称之为 “元素节点”
属性节点和文本节点看起来像是元素节点的一部分，实际上是独立的节点，并不属于元素节点
只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点

获取元素

getElementByld()

浏览器解析一个页面从上到下，使用 window.onload 使得浏览器把整个页面解析完了再去解析 window.onload 内部的代码

document.getElementById("id名")  //通过 id 获取元素(单个)
<script>
    window.onload = function()
    {
        //自己写的代码
    }
</script>

getElementsByTagName()

document.getElementsByTagName("标签名") 
/*
过标签名获取元素，多个
document.getElementsByTagName("标签名")
获取的是整个 HTML 页面中的标签名
*/

<script>  //getElementsByTagName() 可以操作动态创建的 DOM
    window.onload = function()
    {
        document.body.innerHTML = "<input type='button' value='按钮'/>" + 
        "<input type='button' value='按钮'/><input type='button' value='按钮'/>";
        var obtn = document.getElementsByTagName("input");
        obtn[0].onclick = function()
        {
            alert("表单元素共有:" + obtn.length + "个");
        };
    }
</script>
<script>   //getElementByld() 不可以操作动态创建的 DOM
    window.onload = function()
    {
        document.body.innerHTML = "<input id='btn' type='button' value='按钮'/>"+
        "<input id='btn' type='button' value='按钮'/>"+
        "<input id='btn' type='button' value='按钮'/>";
        var obtn = document.getElementById("btn");
        obtn.onclick = function()
        {
            alert("表单元素共有:" + obtn.length + "个");
        };
    }
</script>

辨析
getElementById() 获取的是一个元素，而 getElementsByTagName() 获取的是多个元素(伪数组)
getElementById() 前面只能接 document，getElementsByTagName() 前面不仅可以接 document，还可以接其余 DOM 对象
getElementById() 不可以操作动态创建的 DOM 元素，而 getElementsByTagName() 可以操作动态创建的 DOM

getElementsByClassName()

getElementsByClassName() 不能动态操作 DOM

document.getElementsByClassName("类名") //通过类名获取元素

querySelector() && querySelectorAll()

document.querySelector("选择器"); //选择满足条件的第一个元素
document.querySelectorAll("选择器"); //选择满足条件的所有元素

对于 id 选择器来说，由于页面只有一个元素，建议使用 getElementById()，因为效率更高

getElementsByName()

getElementsByName 表单元素有 name 属性，通过 name 属性获取表单元素

document.getElementsByName("name名")

getElementsByName 只用于表单元素，一般只用于单选框和复选框

document.title 和 document.body

一个页面只有一个 title 和 body 元素，JavaScript 提供了两个非常方便的方法：document.title 和 document.body

<script>
    window.onload = function()
    {
        document.title = "梦想是什么";
        document.body.innerHTML = "<strong style='color:red'>梦想就是一种让你感到坚持就是幸福的东西</strong>";
    }
</script>

创建元素

动态 DOM ：使用 JavaScript 创建的元素，这个元素一开始在 HTML 中是不存在的

var e1 = document.createElement("元素名"); //创建元素节点
var txt = document.createTextNode("文本内容"); //创建文本节点
e1.appendChild(txt);   //把文本节点插入元素节点中
e2.appendChild(e1);   //把组装好的元素插入已存在的元素中

动态创建图片

<script>
    window.onload = function()
    {
        var oimg = document.createElement("img");
        oimg.className = "pic";
        oimg.src = "图片的路径";
        oimg.style.border="1px solid silver";
        document.body.appendChild(oimg);
    }
</script>

动态创建表单

<script>
    window.on3;load = function()
    {
        var otable = document.createElement("table");
        for(var i = 0; i < 3; i++)
        {
            var otr = document.createElement("tr");
            for(var j = 0; j < 3; j++)
            {
                var otd = document.createElement("td");
                otr.appendChild(otd);
            }
            otable.appendChild(otr);
        }
        document.body.appendChild(otable);
    }
</script>

插入元素

appendChild()

appendChild：把一个新元素插入到父元素的内部子元素的末尾

A.appendChild(B); //A 父元素,B子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var obtn = document.getElementById("btn");
				//为按钮添加事件
				obtn.onclick = function()
				{
					var oul = document.getElementById("list");
					var otxt = document.getElementById("txt");
					
					//将文本框内容转化为 "文本结点"
					var textNode = document.createTextNode(otxt.value);
					//动态创建一个 li 元素
					var oli = document.createElement("li");
					
					//将文本节点插入 li 元素中去
					oli.appendChild(textNode);
					//将 li 元素插入 ul 元素中
					oul.appendChild(oli);
				}
			}
		</script>
	</head>
	<body>
		<ul id = "list">
			<li>Java</li>
		</ul>
		<input id = "txt" type="text" /><input id="btn" type="button" value="插入" />
	</body>
</html>

insertBefore()

insertBefore 将一个新元素插入到父亲元素中的某一个元素之前

A.insertBefore(B, ref); //A父元素,B新的子元素,ref表示指定子元素,在ref之前插入子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var obtn = document.getElementById("btn");
				//为按钮添加事件
				obtn.onclick = function()
				{
					var oul = document.getElementById("list");
					var otxt = document.getElementById("txt");
					
					//将文本框内容转化为 "文本结点"
					var textNode = document.createTextNode(otxt.value);
					//动态创建一个 li 元素
					var oli = document.createElement("li");
					
					//将文本节点插入 li 元素中去
					oli.appendChild(textNode);
					//将 li 元素插入到 ul 的第一个子元素前面
					oul.insertBefore(oli, oul.firstElementChild);
				}
			}
		</script>
	</head>
	<body>
		<ul id = "list">
			<li>Java</li>
		</ul>
		<input id = "txt" type="text" /><input id="btn" type="button" value="插入" />
	</body>
</html>

appendChild() 与 insertBefore() 插入元素的方法都需要获取父元素才可以进行操作

删除元素

removeChild()：删除父元素下的某个子元素

A.removeChild(B) //A表示父元素,B表示子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var obtn = document.getElementById("btn");
				//为按钮添加事件
				obtn.onclick = function()
				{
					var oul = document.getElementById("list");
					//删除最后一个元素
					oul.removeChild(oul.lastElementChild);
					/*
					删除第一个元素
					oul.removeChild(oul.firstElementChild);
					删除列表
					document.body.removeCild(oul);
					*/
				}
			}
		</script>
	</head>
	<body>
		<ul id = "list">
			<li>Java</li>
		</ul>
		<input id="btn" type="button" value="删除" />
	</body>
</html>

removeChild 方法必须找到被删除的子元素；被删除子元素的父元素

复制元素

obj.cloneNode(bool)
/*
参数 obj 表示被复制的元素，而参数 bool 是一个布尔值，取值如下:
1 或 true: 表示复制元素本身以及复制该元素下的所有子元素
0 或 false: 表示仅仅复制元素本身,不复制该元素下的子元素
*/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var obtn = document.getElementById("btn");
				obtn.onclick = function()
				{
					var oul = document.getElementById("list");
					document.body.appendChild(oul.cloneNode(true));
				}
			}
		</script>
	</head>
	<body>
		<ul id = "list">
			<li>Java</li>
			<li>JavaScript</li>
		</ul>
		<input id="btn" type="button" value="复制"/>
	</body>
</html>

替换元素

A.replaceChild(new, old); //A父元素,new 表示新子元素,old表示旧子元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var btn = document.getElementById("btn");
				btn.onclick = function()
				{
					//获取 body 中第一个元素
					var ofirst = document.querySelector("body *:first-child");
					
					//获取二个文本框
					var otag = document.getElementById("tag");
					var otxt = document.getElementById("txt");
					//根据两个文本框创建一个新节点
					var onewtag = document.createElement(otag.value);
					var onewtxt = document.createTextNode(otxt.value);
					
					onewtag.appendChild(onewtxt);
					document.body.replaceChild(onewtag,ofirst);
				}
			}
		</script>
	</head>
	<body>
		<p>Java</p>
		<p>JavaScript</p>
		<hr/>
		输入标签: <input id="tag" type="text" /><br/>
		输入内容: <input id="txt" type="text" /><br/>
		<input id="btn" type="button" value="替换"/>
	</body>
</html>

替换元素，必须提供三个节点: 父元素，新元素和旧元素

DOM 进阶

HTML 属性操作

获取HTML 属性值

获取 HTML 元素的属性值，一般通过属性名，来找到该属性对应的值

obj.attr
/*
obj 是元素名，是 DOM 的一个对象，即 getElementById()、getElementsByTagName()等方法获取到的元素节点
attr是属性名，对于对象来说，通过点运算符(.)来获取它的属性值
*/

获取静态 HTML 中的属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var obtn = document.getElementById("btn");
				obtn.onclick = function()
				{
					alert(obtn.id);
				};
			}
		</script>
	</head>
	<body>
		<input id="btn" class="myBtn" type="button" value="获取" />
	</body>
</html>

获取动态 DOM 中的属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				//动态创建一个按钮
				var oinput = document.createElement("input");
				oinput.id = "submit";
				oinput.type = "button";
				oinput.value = "提交";
				document.body.appendChild(oinput);
				//为按钮添加事件
				oinput.onclick = function()
				{
					alert(oinput.id);
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

获取文本框的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var obtn = document.getElementById("btn");
				obtn.onclick = function()
				{
					var otxt = document.getElementById("txt");
					alert(otxt.value);
				};
			}
		</script>
	</head>
	<body>
		<input id="txt" type="text" />
		<input id="btn" type="button" value="获取" />
	</body>
</html>

获取单选框的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var obtn = document.getElementById("btn");
				var ofruit = document.getElementsByName("fruit");
				obtn.onclick = function()
				{
					for(var i = 0; i < ofruit.length; i++)
						if(ofruit[i].checked)
							alert(ofruit[i].value);
				};
			}
		</script>
	</head>
	<body>
		<div>
			<label><input type="radio" name="fruit" value="苹果" checked="true"/>苹果</label>
			<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
			<label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
		</div>
		<input id="btn" type="button" value="获取"/>
	</body>
</html>

获取复选框的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var obtn = document.getElementById("btn");
				var ofruit = document.getElementsByName("fruit");
				obtn.onclick = function()
				{
					var str = "";
					for(var i = 0; i < ofruit.length; i++)
						if(ofruit[i].checked)
						    str += ofruit[i].value;
					alert(str);
				};
			}
		</script>
	</head>
	<body>
		<div>
			<label><input type="checkbox" name="fruit" value="苹果" />苹果</label>
			<label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
			<label><input type="checkbox" name="fruit" value="西瓜" />西瓜</label>
		</div>
		<input id="btn" type="button" value="获取"/>
	</body>
</html>

获取下拉菜单的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		    window.onload = function()
			{
				var obtn = document.getElementById("btn");
				var oselect = document.getElementById("select");
				obtn.onclick = function()
				{
					alert(oselect.value);
				};
			}
		</script>
	</head>
	<body>
		<select id="select">
			<option value="北京">北京</option>
			<option value="上海">上海</option>
			<option value="广州">广州</option>
			<option value="深圳">深圳</option>
			<option value="杭州">杭州</option>
		</select>
		<input id="btn" type="button" value="获取"/>
	</body>
</html>

设置 HTML 属性值

obj.attr="值";

HTML 属性操作

getAttribute()

getAttribute 获取元素的某个属性值

obj.getAttribute("attr")  //obj 元素名; attr 属性名

setAttribute()

setAttribute 设置元素的某个属性值

obj.setAttribute("attr", "值");

removeAttribute()

removeAttribute 删除元素的某个属性

obj.removeAttribute("attr");

hasAttribute()

obj.hasAttribute("attr")

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		    .main{color: red; font-weight: bold;}
		</style>
		<script>
		    window.onload = function()
			{
				var op = document.getElementsByTagName("p");
				var obtnadd = document.getElementById("btn_add");
				var obtnremove = document.getElementById("btn_remove");
				//添加 class
				obtnadd.onclick = function(){
					op[0].className = "main";
				};
				//删除 class
				if(op[0].hasAttribute("class"))
				{
				    obtnremove.onclick = function(){
					    op[0].removeAttribute("class");
				    };
				}
			}
		</script>
	</head>
	<body>
		<p class="main">Hello World!</p>
		<input id="btn_add" type="button" value="添加样式" />
		<input id="btn_remove" type="button" value="删除样式" />
	</body>
</html>

CSS 属性操作

获取 CSS 属性值

getComputedStyle()：获取一个 CSS 属性的取值

getComputedStyle(obj).attr;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		    #box{
				width: 100px;
				height: 100px;
				background-color: hotpink;
			}
		</style>
		<script>
		    window.onload = function()
			{
				var obtn = document.getElementById("btn");
				var obox = document.getElementById("box");
				
				obtn.onclick = function()
				{
					alert(getComputedStyle(obox).backgroundColor);
				};
			}
		</script>
	</head>
	<body>
		<input id="btn" type="button" value="获取颜色" />
		<div id="box"></div>
	</body>
</html>

设置 CSS 属性值

style 对象来设置一个 CSS 属性的值

obj.style.attr = "值";

obj 是 DOM 对象，attr 表示 CSS 属性名；obj.style.attr 等价于 obj.style[“attr”]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		    #box
			{
				width: 100px;
				height: 100px;
				background-color: hotpink;
			}
		</style>
		<script>
		    window.onload = function()
			{
				var obtn = document.getElementById("btn");
				var obox = document.getElementById("box");
				obtn.onclick = function()
				{
					//获取 2 个文本框的值(也就是输入的内容)
					var attr = document.getElementById("attr").value;
					var val = document.getElementById("val").value;
					obox.style[attr] = val;
				};
			}
		</script>
	</head>
	<body>
		属性: <input id="attr" type="text" /><br />
		取值: <input id="val" type="text" /><br />
		<input id="btn" type="button" value="设置" />
		<div id="box"></div>
	</body>
</html>

cssText 同时设置多个 CSS 属性

obj.style.cssText="值";

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		    .oldBox{
				width: 100px;
				height: 100px;
				background-color: hotpink;
			}
			.newBox{
				width: 50px;
				height: 50px;
				background-color: lightblue;
			}
		</style>
		<script>
		    window.onload = function()
			{
				var obtn = document.getElementById("btn");
				var obox = document.getElementById("box");
				var cnt = 0;
				obtn.onclick = function()
				{
					if(cnt%2 == 0) obox.className = "newBox";
					else obox.className = "oldBox";
					++cnt;
				};
			}
		</script>
	</head>
	<body>
		<input id="btn" type="button" value="切换" />
		<div id="box" class="oldBox"></div>
	</body>
</html>

obj.style.attr 只可以获取 style 属性中设置的 CSS 属性，对于内部样式或者外部样式，是没有办法获取的
getComputedStyle() ：获取计算后的样式，就是不管是内部样式还是行内样式，最终获取的是根据 CSS 优先级计算后的结果
obj.style.backgroundColor 中，backgroundColor 其实也是一个变量，变量中是不允许出现中划线，中划线在 JavaScript 中是减号的意思

DOM 遍历

查找父元素

obj.parentNode

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		    table{border-collapse: collapse;}
			table, tr, td {border: 1px solid gray;}
		</style>
		<script>
		    window.onload = function()
			{
				var otd = document.getElementsByTagName("td");
				//遍历每一个 td 元素
				for(var i = 0; i < otd.length; i++)
				{
					//为每一个 td 元素添加点击事件
					otd[i].onclick = function()
					{
						//获取当前 td 的父元素(即 tr)
						var oParent = this.parentNode;
						//为当前 td 的父元素添加样式
						oParent.style.color = "pink";
						oParent.style.backgroundColor = "red";
					};
				}
			}
		</script>
	</head>
	<body>
		<table>
			<caption>考试成绩表</caption>
			<tr>
				<td>小明</td>
				<td>80</td>
				<td>90</td>
				<td>88</td>
			</tr>
			<tr>
				<td>小红</td>
				<td>88</td>
				<td>90</td>
				<td>99</td>
			</tr>
		</table>
	</body>
</html>

查找子元素

childNodes：获取的是所有的子节点，包括元素节点和文本节点，开发不常用
children：获取的是所有的元素节点，不包括文本节点
firstChild：开发不常用
firstElementChild：获取的是第一个子元素节点
lastChild：开发不常用
lastElementChild：获取的是最后一个子元素节点