JavaScript DOM操作基础

最新推荐文章于 2022-05-21 16:24:33 发布
最新推荐文章于 2022-05-21 16:24:33 发布
阅读量749 收藏 1
点赞数
分类专栏： 前端学习 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Morbidmuse/article/details/121876394
版权

/*
DOM(Document Object Model):文档对象模型
    它是由W3C定义的一个标准
    可以简单理解为对HTML中的元素进行操作的方法
    我们在操作元素时,其实就是把元素看作一个对象
    然后使用对象的属性和方法来进行相关操作
DOM结构:
    html
        head
            title
            meta
            link
            style
            script
        body
            h1
            p
            div
                span
父节点
    如html是head和body的父节点
子节点
    如li是ul/ol的子节点
    option是select的子节点
兄弟节点
    如上面的结构中 h1 p div是兄弟节点

节点类型:
    DOM节点共有12种类型
        元素节点:1
        属性节点:2
        内容节点:3
        可以通过nodeType属性来判断一个节点的类型
        只有元素节点才可以拥有子节点,属性节点和内容节点不行

获取元素
    getElementById()
        通过id来选中元素
        不可以操作动态创建的DOM
        返回单个元素
        只能是document.getElementById()
    getElementsByTagName()
        可以操作动态创建的DOM
        返回一个伪数组
        除了可以document.getElementsByTagName()调用对象也可以是其他DOM
    getElementsByClassName()
        返回一个伪数组
        不可以操作动态创建的DOM
    querySelector()
        document.querySelector("选择器") : 选取满足条件的第一个元素
        其中选择器的写法和CSS中完全一样
    querySelectorAll()
        得到的是一个伪数组
        document.querySelector("选择器") : 满足条件的所有元素
    getElementsByName()
        对于表单元素,有一个name属性,可以通过getElementsByName("name名")来获取.如单选按钮和复选框
        
    document.title
        选中标题
    document.body
        选中body 
创建元素:
    createElement()来创建一个元素节点,
    createTextNode()来创建一个文本节点,
    语法:
        var e1=createElement("元素名");//创建元素节点
        var txt=createTextNode('文本内容');//创建文本节点
        e1.appendChild(txt);//把文本节点插入到元素节点中
        e2.appendChild(e1);//把组装好的元素节点插入到已经存在的元素中
插入元素:
    appendChild();//把一个新元素插入到父元素的内部末尾
    insertBefore();//将新元素插入到父元素中某一个子元素之前
        A.insertBefore(B,ref);//A表示父元素,B表示新子元素,ref表示指定子元素
删除元素:
    A.removeChild(B);//从父元素A中删除某一个子元素B
复制元素:
    obj.cloneNode(Bool);
        obj表示被复制的元素,
        bool
            1:复制元素及所有子元素
            0:仅复制元素本身
替换元素:
    A.replaceChild(new,old);
        A是父元素
        new是新的子元素
        old是需要被替换的元素
*/
    
    

*/

01获取元素示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload =function(){
				var oDiv = document.getElementById("div1");
				oDiv.style.color = 'red';
				// 注意getElementsByTagName的调用对象是父元素
				// 返回的是一个类数组,要通过下标的方式取出单个元素才能设置样式
				// 类数组 只能使用length属性和下标方式
				oUl = document.getElementById('list');
				var oLi = oUl.getElementsByTagName("li");
				oLi[2].style.color= 'purple';
				// 如果要设置每一个oLi则可以通过遍历数组来实现
				var arr = ['js','css','html','jquery','vue','bootstrap']
				for (var i=0;i<oLi.length;i++){
					oLi[i].innerHTML=arr[i];
					oLi[i].style.color='mediumpurple';

				}
				var oP=document.getElementsByClassName('p');
				oP[0].style.backgroundColor='lightpink';
				var oDiv2 = document.querySelector('.content');
				oDiv2.style.backgroundColor = "#ffab00";
				
				var oClass = document.querySelectorAll('.content');
				console.log(oClass);
				oClass[1].style.color='darkslategray';
				
				var oLi1=document.querySelector('#list li:nth-child(2)');
				oLi1.style.color='deepskyblue'
			}
		</script>
	</head>
	<body>
		<div id="div1">
			Javascript
			
		</div>
		<ul id="list">
			<li>js</li>
			<li>html</li>
			<li>css</li>
			<li>css</li>
			<li>css</li>
			<li>css</li>
		</ul>
		<p class = 'p'>
			这是一个段落
		</p>
		<div class="content">
			这是一个盒子
		</div>
		<p class='content'>这里来一个灰色文字</p>
	</body>
</html>

 02动态DOM

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				document.body.innerHTML="<input type='button' value='按钮'/><input type='button' value='按钮'/><input type='button' value='按钮'/>";
				var oBtn = document.getElementsByTagName('input');
				// var oBtn = document.getElementById('btn')  这样不行
				oBtn[0].onclick=function(){
					alert('表单元素共有:'+oBtn.length+"个")
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

03getElementByName举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				// 单选框
				var oInput = document.getElementsByName("status");
				oInput[2].checked=true; //设定选中
				// 复选框
				var oCheckbox = document.getElementsByName('music');
				// oCheckbox[4].checked=true;
				//通过for循环遍历,全选
				for (var i=0;i<oCheckbox.length;i++){
					oCheckbox[i].checked=true;
				}
				
			}
		</script>
	</head>
	<body>
		<form action="" method="post">
			你的最高学历:
			<label ><input type="radio" name="status" value="本科"/>硕士</label>
			<label ><input type="radio" name="status" value="硕士"/>硕士</label>
			<label ><input type="radio" name="status" value="博士"/>博士</label>
			<br>
			你喜欢的音乐类型:
			<label ><input type="checkbox" name="music" value="pop"/>pop</label>
			<label ><input type="checkbox" name="music" value="blue"/>blue</label>
			<label ><input type="checkbox" name="music" value="metal"/>metal</label>
			<label ><input type="checkbox" name="music" value="classcal"/>classcal</label>
			<label ><input type="checkbox" name="music" value="darkwave"/>darkwave</label>
			<label ><input type="checkbox" name="music" value="postrock"/>postrock</label>
			
		</form>
	</body>
</html>

04title和body举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				document.title='梦想是什么?';
				document.body.innerHTML="<strong style='color:darkred'>梦想就是一种让你感到坚持就是胜利的东西</strong>";
			}
		</script>
	</head>
	<body>
	</body>
</html>

05创建元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table{border-collapse: collapse;}
			tr,td{
				width: 80px;
				height: 1.25rem;
				border: 1px solid darkslategray;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				//动态创建一个元素,并插入到已有元素中
				var oDiv=document.getElementById("content");
				var oStrong=document.createElement('strong');
				var oTxt=document.createTextNode('我爱自学网');
				oStrong.appendChild(oTxt);
				oDiv.append(oStrong);
				// 创建复杂的带属性的元素
				var oInput=document.createElement('input');
				oInput.id="submit";
				oInput.type="button";
				oInput.value="提交";
				document.body.appendChild(oInput);
				// 动态创建图片
				var oImg=document.createElement('img');
				oImg.className='pic';//注意设置元素的class必须使用className,class是js的保留字
				oImg.src="img/1112.jpg";
				oImg.style.border="1px solid silver";
				document.body.appendChild(oImg);
				
				// 创建对个元素
				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');
						txt=document.createTextNode("第"+(i+1)+"行"+"第"+(j+1)+"列")
						oTd.append(txt)
						oTr.appendChild(oTd);
					}oTable.append(oTr)
				}
				//添加到body中
				document.body.append(oTable)
			}
		</script>
	</head>
	<body>
		<div id="content">
			
		</div>
	</body>
</html>

06插入元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			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");
					oLi.appendChild(textNode);
					oUl.append(oLi);
				}*/
				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");
					oLi.appendChild(textNode);
					oUl.insertBefore(oLi,oUl.firstElementChild)
				}
			}
		</script>
	</head>
	<body>
		<ul id="list">
			<li>html</li>
			<li>css</li>
			<li>javascript</li>
		</ul>
		<input type="text" name="" id="txt" value="" />
		<input type="button" name="" id="btn" value="插入" />
	</body>
</html>

07删除元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn=document.getElementById('btn');
				oBtn.onclick=function(){
					var oUl=document.getElementById('list');
					//删除最后一个子元素
					// oUl.removeChild(oUl.lastElementChild);
					// 删除整个列表
					document.body.remove(oUl);
				}
			}
		</script>
	</head>
	<body>
		<ul id="list">
			<li>html</li>
			<li>css</li>
			<li>javascript</li>
			<li>JQuery</li>
			<li>BootStrap</li>
		</ul>
		<input type="button" name="" id="btn" value="删除" />
	</body>
</html>

08复制元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn=document.getElementById('btn');
				oBtn.onclick=function(){
					var oUl=document.getElementById("list");
					document.body.appendChild(oUl.cloneNode(1));
				}
			}
		</script>
	</head>
	<body>
		<ul id='list'>
			<li>html</li>
			<li>css</li>
			<li>javascript</li>
			
		</ul>
		<input type="button" name="" id="btn" value="复制" />
	</body>
</html>

09替换元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				var oBtn=document.getElementById('btn');
				oBtn.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.append(oNewTxt);
					document.body.replaceChild(oNewTag,oFirst);
					
					
				}
			}
		</script>
	</head>
	<body>
		<p>JavaScript
		</p>
		<hr >
		输入标签:<input type="text" name="" id="tag" value="" /><br>
		输入内容:<input type="text" name="" id="txt" value="" />
		<input type="button" id='btn' value='替换' />
	</body>
</html>

Morbidmuse
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript dom 基本操作小结
10-29
JavaScript DOM 基本操作小结 在网上找到很多 DOM 操作的例子，感觉不全且凌乱。以下是 JavaScript DOM 基本操作小结，总结了 DOM 元素的创建、插入、替换和删除等基本操作。 DOM 元素的创建 在 JavaScript 中，...
【BOM】js中的window.onload事件
在热爱技术的路上一直前行。
05-26 2274
1、语法 window.onload = function(){} window.addEventListener('load',function() {}); 2、用法 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数。 3、注意 有了window.onload就可以把js代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数。 window.onload传统注册事件方式只能写一次，如果有多.
window.onload=function()是什么意思
wy123456__的博客
12-23 1万+
window.οnlοad=function()是什么意思 onload是window窗口对象的事件属性， 语句是把“匿名函数”赋值给window的onload事件属性， 当window加载完成时会触发onload事件，也就触发了“匿名函数”，执行函数体内的语句。 ...
JavaScript的window.onload事件的理解
zhansan的博客
05-21 2万+
window.onload()的作用 window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。 window.onload() 通常用于 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。 只有一个要执行的函数语法： window.onload = funcRef; 在页面加载完成后 funcRef 方法会被调用。 有多个要执行的函数语法： window.οnlοad=function(){ Func1(); Fun
JS基础知识
weixin_45720751的博客
09-01 385
JS 简介 特点 解释性语言 类似于C和Java的语法结构 动态语言 基于原型的面向对象 基本语法 输出语句 <script type="text/javascript"> // 控制浏览器弹出一个警告框 alert("这是我的第一行js代码") // 让计算机在页面中输出一个内容 在Body中写入一个内容 document.write("123") // 向控制台输出一个内容 conso
JS相关window.onload= function(){}里定义函数无法调用
Lsiyi_的博客
02-25 4052
z
javascript DOM 操作基础知识小结
12-11
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]一、DOM基础1.节点(node)层次Document－－最顶层的节点，所有的其他节点都是附属于它的。DocumentType－－DTD引用（使用<!DOCTYPE>语法）的对象表现形式，它不能...
JavascriptDOM基本操作
04-24
JavascriptDOM基本操作 dom 精品操作
详解JavaScript操作HTML DOM的基本方式
10-23
JavaScript可以通过DOM接口访问和操作这些对象，从而实现对页面的动态控制。 要找到HTML元素，有多种方法。首先是通过ID查找，这是最直接的方式。例如，如果要获取ID为"intro"的元素，可以使用`getElementById`方法...
JavaScript学习笔记之DOM基础操作实例小结
10-17
主要介绍了JavaScript学习笔记之DOM基础操作,结合实例形式总结分析了javascript针对dom元素节点、属性的相关获取、设置等操作技巧,需要的朋友可以参考下
JS中window.onload事件详解
热门推荐
pseudonym_的博客
05-21 5万+
window.onload事件方法的探讨和一个易懂的实例演示。
DOM基础之插入元素
ch_musk的博客
06-28 4006
插入元素有两种方法 1 appendChild() 2 insertBefore() 1.在JavaScript中我们可以使用appendChild()方法把一个新元素插入到父元素内部子元素的末尾 语法：A.appendChild(B); 说明： A代表父元素，B表示动态创建好的新元素，即子元素 实例 ``` <!DOCTYPE > <ht...
windows页面加载
wxl1390的博客
09-05 1077
通用的页面加载js有四种方式： 1.window.onload = function(){}; —-js 2.(window).load(function());——Jquery3.(window).load(function(){});——Jquery 3.(window).load(function());——Jquery3.(document).ready(function(){});–J...
window.onload=function(){}用法
yuananyun的专栏
05-23 7964
这是匿名函数的写法,就相当于window的onload事件调用了一个方法，但是这个方法是匿名的常规写法：不带参数：function Alert(){alert("Hello World!");}window.onload=Alert();输出：Hello World!带参数：function Alert(int){alert("int");}wind
JavaScript DOM操作
vonallen的博客
08-01 425
DOM操作基础 JavaScript的组成 JavaScript基础分为三个部分： ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。 DOM：文档对象模型(Document object Model)，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。 BOM：浏览器对象模型(Browser Object Model)，操作浏览器部分功能的API。比如让浏览器自动滚动。 节点 节点(Node)：构成 HTML 网页的最基本
事件（event）
weixin_44522602的博客
03-20 866
参考：b站尚硅谷
一文透析js节点操作（吐血整理）
qq_52372698的博客
02-02 808
利用节点层级关系获取元素 利用父子兄节点关系获取元素 逻辑性强，但是兼容性稍差 一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性
jquery $(document).ready() 与window.onload的区别
和静清寂
07-15 557
1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 2.编写个数不同 window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个 $(document).ready()可以同时编写多个，并且都可以得
无法获取js创建的dom
weixin_41138247的博客
04-08 579
页面先执行脚本，再渲染DOM。因此无法使用如jquery的$('#id')或D3的select去获取dom。 需要先创建DOM，创建完成后执行window.onload()方法，确保dom已经装载完成。选择器放在此方法中即可。 ...
107个常用Javascript语句1
最新发布
08-03
2.JS 中的注释为// 4.一个浏览器窗口中的 DOM 顺序是:window- >(navigator,screen,history,location,doc

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值