Web之dom

最新推荐文章于 2023-05-30 22:07:42 发布

中國颜值的半壁江山

最新推荐文章于 2023-05-30 22:07:42 发布

阅读量564

点赞数

分类专栏：前端文章标签： dom

本文链接：https://blog.csdn.net/a17853481576/article/details/108821231

版权

本文详细介绍了DOM的基本用法，包括查找元素的直接与间接方法，内容、属性、class及标签的操作，事件处理如DOM0、DOM1级别的事件绑定，以及一些实用的小例子，如模拟弹出对话框、全选、取消和反选功能等。

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

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

一、查找元素

1、直接查找

document.getElementById('i1')             /根据ID获取一个标签
document.getElementsByName('div')         /根据name属性获取标签集合
document.getElementsByClassName('c1')     /根据class属性获取标签集合
document.getElementsByTagName()       	  /根据标签名获取标签集合

2、间接查找

parentElement()           	/父节点标签元素
children()                	/所有子标签
firstElementChild()       	/第一个子标签元素
lastElementChild()        	/最后一个子标签元素
nextElementtSibling()     	/下一个兄弟标签元素
previousElementSibling()  	/上一个兄弟标签元素

二、操作

1、内容

tag.innerText			//仅获取标签中的文本内容
tag.innerText = 'ada'	//对标签的文本内容重新赋值
tag.innerHtml			//全部获取
tag.value       		//值
	input标签	可通过value获取当前标签中的值
	select标签	获取选中的value值(selectedIndex)
	textarea	可通过value获取当前标签中的值

2、属性

obj.setAttribute('key','value')		//添加属性('属性名称','属性值')
obj.removeAttribute('lishang')		//删除属性
obj.attributes						//列出所有属性

例子：
<input id='i1' onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字" />

obj = document.getElementById('i1') 
--->>>
obj：					--->>>
<input id='i1' onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字" >
obj.setAttribute('lishang','xiaomeng')
obj:					--->>>
<input id='i1' onfocus="Focus()" onblur="Blur()" type="text" value="请输入关键字"  lishang="xiaomeng">
obj.removeAttribute('lishang')
obj.attributes			--->>>
NamedNodeMap {0: id, 1: onfocus, 2: onblur, 3: type, 4: value, id: id, onfocus: onfocus, onblur: onblur, type: type, value: value, …}

3、class操作

className                // 获取所有类名
classList.remove(cls)    // 删除指定指定样式
classList.add(cls)       // 添加指定样式
checkbox.checked		 // 能获取值也能够赋值
上面是针对class整个样式做修改和获取，下面是修改其中单个属性
如：
<style>
   .c1{
   
   	font-size: 16px;
   	color: red;
   	...
   }
</style>
<div class='c1 c2' style='font-size: 16px;'></div>

obj.style.fontSize = '16px';
obj.style.color = 'pink';

4、标签操作

4.1、创建标签，并添加到Html页面中去

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
   <input type="button" onclick="Addele1();" value="+"/>
   <input type="button" onclick="Addele2();" value="+"/>
   <div id = 'i1'>
       <p><input type="text" /></p>
   </div>
   <script>
   		//添加方式一，通过字符串的方式
       function Addele1() {
    
           var tag = "<p><input type='text'/></p>"
           //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
           document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
       }
        //添加方式二，通过对象的方式
   	   function Addele2() {
    
           var tag = document.createElement('input');
           tag.setAttribute('type','text')
           tag.style.fontSize = '16px'
           tag.style.color = 'red'
           
   		   var p = document.createElement('p');
           p.appendChild(tag)
           
           document.getElementById('i1').appendChild(tag);        
   </script>
</body>
</html>

5、提交表单

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
   <form id="f1" action="http://www.oldboyedu.com">
       <input type="text">
       //提交方式 1
       <input type="submit" value="提交">
       //提交方式 2
       <a onclick="submit();">提交</a>
   </form>
   <script>
       function submit() {
    
           document.getElementById('f1').submit()
       }
   </script>
</body>
</html>

6、其他

console.log                 输出框
alert                       弹出框
confirm                     确认框
 
// URL和刷新
location.href               获取URL
location.href = "baidu.com" 重定向
location.reload()           重新加载
 
// 定时器
var oa = setInterval(function(){};5000});     多次定时器,每5秒执行一次
clearInterval(oa)          					  清除多次定时器
var tb= setTimeout(function(){};5000});      单次定时器,5秒之后执行一次
clearTimeout(tb)                						  清除单次定时器

三、事件

一个表格鼠标移上去的时候高亮显示

1、dom0 初级写法

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</

最低0.47元/天解锁文章

中國颜值的半壁江山

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Web之dom

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。一、查找元素1、直接查找document.getElementById('i1') /根据ID获取一个标签document.getElementsByName('div
复制链接

扫一扫

专栏目录