JavaScript DOM 学习笔记

原创

已于 2022-02-21 17:24:21 修改 · 1.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #前端

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

文章目录

Dom 基础
DOM 进阶

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.