JavaScript DOM 学习笔记-摩杜云开发者社区

文章目录

Dom 基础
DOM 进阶

Dom 基础

Dom 基本概念

DOM 全称 Document Object Model 模型
DOM 操作，可以简单理解成元素操作
JavaScript 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：获取的是最后一个子元素节点

查找兄弟元素

previousSibling：查找前一个兄弟节点
nextSibling：查找最后一个兄弟节点
previousElementSibling：查找前一个兄弟元素节点
nextElementSibling：查找后一个兄弟元素节点

innerHTML && innerText

innerHTML：获取和设置一个元素的内部元素
innerText：获取和设置一个元素的内部文本

`HTML` 代码	`innerHTML`	`innerText`
<div>学习网</div>	学习网	学习网
<div><em>学习网</em></div>	<em>学习网</em>	学习网
<div><em></em></div>	<em></em>	空字符串