【无标题】

最新推荐文章于 2024-09-10 14:54:25 发布

yuan○yuan

最新推荐文章于 2024-09-10 14:54:25 发布

阅读量58

点赞数 2

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/2301_76879790/article/details/130797627

版权

本文介绍了DOM的基本概念，包括核心DOM和HTMLDOM的区别，以及在实际开发中的应用。详细讲解了通过getElementById、getElementsByTagName和H5新增的获取元素方法，如querySelector。同时，提到了事件的三要素和修改元素内容的方法，如innerHTML和textContent。最后，讨论了如何在DOM树中添加、插入和替换元素的操作。

摘要由CSDN通过智能技术生成

JS DOM(一）笔记

DOM简介：

1、DOM：Document Object Model（简称文档对象模型），是专门用于操作网页内容API一套标准,网页内容：字符、图片等各种资源

2、核心DOM：操作一切结构化文档的API标准,特点：强大，万能；缺点：操作繁琐。

3、HTML DOM：专门操作HTML网页的API标准–针对核心DOM中部分API进行了简化！优点：操作相对简化；缺点：非万能。

4、对比：实际开发中HTML DOM使用频率相对较高，只有当HTML DOM无法实现某些功能时才会使用核心DOM。

DOM树：

文档：一个页面就是一个文档，DOM中使用document表示
元素：页面中的所有标签都是元素，DOM中使用element表示
节点：网页中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

节点对象：

DOM上每一个节点，都是一个节点对象，提供了操作节点的API。
节点对象的属性：
1、nodeType：保存着节点的类型名！–不能明确获知节点名称
2、nodeName：保存节点的名称！–区分不同元素
3、nodeValue：保存元素的值！
正式操作DOM：增删改查！　　操作流程：获取能够操作的元素–目标元素–绑定事件–获取需要操作的元素–事件具体操作

查找/获取：

1、getElementById获取元素

<div id="time">2023-5-21</div>
//1、因为我们文档页面从上往下加载，所以先得有标签，所以我们script写到标签的下面
//2、get 获得element元素 by 通过 驼峰命名法
//3、参数id 是大小写敏感的字符串
//4、返回的是一个元素对象
var timer=document.getElementById('time');
console.log(timer);
console.log(typeof timer);//检测数据类型
//5、console.dir打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);

2、getElementsByTagName 获取元素

<ul>
	<li>知否知否，应是绿肥红瘦1</li>
	<li>知否知否，应是绿肥红瘦2</li>
	<li>知否知否，应是绿肥红瘦3</li>
	<li>知否知否，应是绿肥红瘦4</li>
	<li>知否知否，应是绿肥红瘦5</li>
</ul>
<ol>
	<li>知否知否，应是绿肥红瘦1</li>
	<li>知否知否，应是绿肥红瘦2</li>
	<li>知否知否，应是绿肥红瘦3</li>
	<li>知否知否，应是绿肥红瘦4</li>
	<li>知否知否，应是绿肥红瘦5</li>
</ol>
<script>
	var lis = document.getElementsByTagName('li');
	console.log(lis);//返回的是 获取过来元素对象的集合 以伪数组的形式存储的
	console.log(lis[0]);//结果是<li>知否知否，应是绿肥红瘦1</li>
	//我们想要依次打印伪数组中的元素可以采取遍历的形式
	for(var i=0;i<lis.length;i++){
	console.log(lis[i]);
	}
	//父元素下面的子元素，必须指定单个元素
	var ol=document.getElementsByTagName('ol');
	console.log(ol[0].getElementsByTagName('li');
</script>

3、H5新增获取元素方式

<html>
<body>
	<script>
        //1. getElementsByClassName 根据类名获得某些元素集合
        var boxs =document. getElementsByClassName('box'); 
        console. log(boxs);
        //2. querySelector 返回指定选择器的第一个元素对象 切记里面的选择器需要加符			号. box #nav
        var firstBox =document. querySelector('. box');
        console. log(firstBox);
        var nav =document. querySelector('#nav');
         console. log(nav);
        var li =document. querySelector('li');
        console. log(li);
         //3. querySelectorA11()返回指定选择器的所有元素对象集合
         var allBox =document. querySelectorAll('. box');
         console. log(allBox); 
	 </script>
 </body>
 </html>

事件三要素

 <body>
 <button id="btn">唐伯虎</button> 
<script>
//点击一个按钮，弹出对话框
//1、事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素
//(1)事件源事件被触发的对象 谁 按钮
var btn=document. getElementById('btn');
 //(2)事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
//(3)事件处理程序 通过一个函数赋值的方式 完成
btn. onclick =function(){
alert('点秋香');
}
 </script>
 </body>

修改元素的内容

1、.innerHTML：获取/修改元素中内容区域的内容

内容区域：从起始标记到结束标记之间的区域


取值：elem.innerHTML　　//获取元素elem的内容区域的内容

赋值：elem.innerHTML="新值";

注意：此API赋值的内容，浏览器会当作html代码解析！

2、.textContent：获取/修改元素elem的内容标记内的文本


取值：elem.textContent

赋值：elem.textContent="新值";

注意：此API赋值的内容，浏览器不会解析特殊字符，就是普通文本

3、.value：获取表单元素的value属性值


获取：var style1=elem.style.属性名；

修改：elem.style.属性名=值；

套路：可以将需要的样式设置在一个类中，通过修改class属性引入这个类。

　　elem.className="类名";

操作页面的元素

添加一个元素：

1>创建一个元素：var elem=document.createElement(“新元素”);

2>添加必要的属性和内容：elem.属性名1=值；elem.属性名2=值；elem.innerHTML=“百度一下”;

3>将创建的新元素追加到DOM树中指定的父节点下

1、在父元素的末尾追加新元素：parent.appendChild(elem);

2、中间插入：将新元素插入到兄弟元素之间：parent.insertBefore(elem，兄弟元素);

3、替换：parent.replace(elem，被替换的元素);

yuan○yuan

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【无标题】

1、DOM：Document Object Model（简称文档对象模型），是专门用于操作网页内容API一套标准,网页内容：字符、图片等各种资源2、核心DOM：操作一切结构化文档的API标准,特点：强大，万能；缺点：操作繁琐。3、HTML DOM：专门操作HTML网页的API标准–针对核心DOM中部分API进行了简化！优点：操作相对简化；缺点：非万能。4、对比：实际开发中HTML DOM使用频率相对较高，只有当HTML DOM无法实现某些功能时才会使用核心DOM。
复制链接

扫一扫