目录
一、什么是 DOM
文档对象模型,是JavaScript操作html文档的方法
二、DOM操作的方式方法
现有以下HTML文件,
<div>我是第一个div</div> <div id="div2">我是第二个div</div> <div class="div3">我是第三个div</div> <div name="div4">我是第四个div</div> <div abc='def'>我是第五个div</div> <ul> <li>我是第一个li</li> <li>我是第二个li</li> <li>我是第三个li</li> <li>我是第四个li</li> </ul>
1.获取操作的 对象
也就是 需要操作的 标签
var 变量 = document.querySelector('标签名');
只会获取 相同标签的第一个标签对象
//获取div标签对象 var oDiv = document.querySelector('div'); //获取li标签对象 var oLis = document.querySelector('li'); console.log(oDiv); console.log(oLis);
从执行结果来看,它的确只会获取 整个html文件中 第一个符合条件的标签对象
既然可以获取第一个标签对象,那么我们就可以获取符合条件所有的标签对象:
var 变量 = document.querySelectorAll('标签名');
//获取div var oDiv1 = document.querySelectorAll('div'); //获取li var oLis1 = document.querySelectorAll('li'); console.log(oDiv1); console.log(oLis1);
执行结果:
注意:此时我们获取到的是 一个 伪数组,伪数组中每个单元存储的数据数值,就是 符合条件的 标签对象,但是DOM操作不能直接操作标签对象伪数组,必须 伪数组[索引下标] 获取一个独立的标签对象 进行DOM操作,那就需要 循环遍历伪数组 获取每一个独立的标签对象,进行 DOM操作
伪数组
数据结构 和 数组类似
有 索引下标 有 length 支持[]语法
伪数组支持的函数方法 和 真正的数组不同
看完了以上两种方法,那么我们又怎样获取指定的标签对象,就比如说,我想获取每一个div,
或者第三个li,我们可以采用以下操作:
//获取第2个div //id属性值 var oDiv2 = document.querySelector('#div2'); //获取第3个div //class属性值 var oDiv3 = document.querySelector('.div3'); //获取第4个div //标签属性和属性值 var oDiv4 = document.querySelector('[name = "div4"]'); //获取第5个div //标签属性和属性值 var oDiv5 = document.querySelector('[abc = "def"]'); console.log(oDiv2); console.log(oDiv3); console.log(oDiv4); console.log(oDiv5); //获取第5个div var oDiv6 = document.querySelector('div:nth-child(5)'); console.log(oDiv6); //获取第3个li //先获取ol var oUl = document.querySelector('ul'); var oLis3 = oUl.querySelector('li:nth-child(3)'); console.log(oLis3);
执行结果:
2.设定CSS样式
既然我们获取到了对象,那么我们就可以对其进行一系列的操作:设定CSS样式
设定:
标签属性.style.属性 = 属性值;
特别注意:
属性 font-size 要写成 fontSize(小驼峰命名法),JavaScript中 - 符号 作为 减法运算符号
属性值如果需要单位 不能只写数字,要加单位
在这里我给大家写一个完整的HTML代码,DOM操作设定CSS样式:
注意:js一定要写在html代码下面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div>我是div标签</div> <script> // 获取标签对象 var oDiv = document.querySelector('div'); // 设定css样式 oDiv.style.width = '300px'; oDiv.style.height = '100px'; oDiv.style.backgroundColor = 'pink'; // 带有 - 减号的属性 要写成小驼峰命名法 oDiv.style.fontSize = '30px'; oDiv.style.border = '2px solid #000'; </script> </body> </html>
执行结果:
3.CSS样式获取
css样式属性值的获取
语法1 只能获取行内式的属性值
var 变量 = 标签对象.style.属性
语法2 可以获取任意语法形式设定的css样式
var 变量 = window.getComputedStyle(标签对象).属性;
获取结果如果带有px等单位
可以通过 parseInt() 获取整数部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width: 300px; height: 100px; background: pink; font-size: 50px; border: 3px solid #000; } </style> </head> <body> <div style="color:red">我是div标签</div> <script> // 获取标签对象 var oDiv = document.querySelector('div'); //语法1 //行内式 能使用 标签对象.style.属性 var color = oDiv.style.color; console.log(color); //非行内样式 不能使用 标签对象.style.属性 var width = oDiv.style.width; console.log(width); //语法2 //获取结果带有px单位 通过 parseInt() 获取整数部分 var height = parseInt (window.getComputedStyle(oDiv).height); console.log(height); </script> </body> </html>
执行结果
三、获取和设定标签内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div> 我是div标签 <p>我是p标签</p> <span>我是span标签</span> <h1>我是h1标签</h1> <a href="JavaScript:;">百度</a> <script> //获取标签对象 var oDiv = document.querySelector('div'); <script> </div> </body> </html>
有以上代码,以下代码都是在<script></script>内完成操作:
1. 标签对象.innerHTML
获取和设定都支持解析标签
获取:
var 变量 = 标签对象.innerHTML;
//获取div标签对象的内容 var res = oDiv.innerHTML; console.log(res);
![]()
设定:
标签对象.innerHTML = 字符串;
设定 标签对象 的 内容 只能是 字符串
//设定标签对象的内容 //+= 加等执行的是字符串拼接效果 是在原始内容后拼接新内容 oDiv.innerHTML += '<h3>我是设定的h3</h3>'; //如果使用的是 = 赋值操作 效果是 覆盖赋值效果 // 也就是 后赋值的内容 会覆盖之前内容的
2. 标签对象.innerText
获取和设定时 不支持 解析标签
只能 获取和设定 文本内容
获取
var 变量 = 标签对象.innerText ;
// 获取 div标签对象 的 内容 var res2 = oDiv.innerText; console.log( res2 );
执行结果:
设定
标签对象.innerText = 字符串 ;
设定标签对象的内容 oDiv.innerText += '<h3>我是设定的h3</h3>' ;
执行结果:
四、标签数据
一般标签使用:标签对象.innerHTML 或者 标签对象.innerText 来操作内容
例如:div标签 p标签 等
特殊标签使用:标签对象.value来操作数据
例如:input标签 textarea标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text"><br> <textarea cols="30" rows="10"></textarea><br> <select> <option value="0">北京</option> <option value="1" >上海</option> <option value="2" >广州</option> <option value="3" >重庆</option> <option value="4" >天津</option> </select><br> <button>点击</button> <script> //获取标签对象 var oInp = document.querySelector('input'); var oTex = document.querySelector('textarea'); var oSel = document.querySelector('select'); var oBut = document.querySelector('button'); </script> </body> </html>
以下所有代码,我们都要写在script标签里
1.获取数据
var 变量 = 标签对象.value;
一般状态下 input等标签 默认状态是没有数据的
一般是配合 事件 获取数据数值
//直接获取数据,标签还没有输入数据,获取结果是空字符串 var res = oInp.value; console.log(res); var res2 = oTex.value; console.log(res2); var res3 = oSel.value; console.log(res3);
这样操作只会是获取到空字符串,实际上我们也不会采用这样的方式来获取标签数据,至于怎么操作,先放一放,我们先来看看是怎样设定标签数据的,最后再来获取标签数据,因为我们只有给标签设定好了数据,我们才可以获取到它的数据
2.设定数据
标签对象.value = 数据数值 ;
//设定标签数据 //设定input oInp.value = '王昭没有君啊'; //设定textarea oTex.value = '在努力写博客'; //select标签不能设定value
现在我们就来获取一下标签的数据:
我们 一般是 配合事件 获取数据
逻辑:
给 button标签 绑定了 鼠标左键单击事件
当鼠标左键单击button标签时 button标签触发事件
触发执行 function(){} 匿名函数设定的程序
//给button绑定鼠标点击事件 oBut.addEventListener('click',function(){ var res = oInp.value; console.log(res); var res2 = oTex.value; console.log(res2); var res3 = oSel.value; console.log(res3); });
五、标签属性
每一类标签 直接支持的属性不同
但是每种标签都支持的可以直接操作的属性有三个
id id属性
className class属性
title title属性
1.操作语法:
设定
标签对象.id = 属性值;
标签对象.className = 属性值;
标签对象.title = 属性值;
获取
var 变量 = 标签对象.id;
var 变量 = 标签对象.className;
var 变量 = 标签对象;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="div1" class="div2" name="我是的div标签">我是标签对象</div> <a href="JavaScript:;" name="我是a标签">百度</a> <script> var oDiv = document.querySelector('div'); var oA = document.querySelector('a'); var oIpt = document.querySelector('input'); //设定 oDiv.id ='我是设定的id'; oDiv.className = '我是设定的class'; oDiv.title = '我是设定的title'; //获取 var res = oDiv.id; var res2 = oDiv.className; var res3 = oDiv.title; console.log(res); console.log(res2); console.log(res3); </script> </body> </html>
2.标签属性的通用操作方法
所有标签的所有属性 都可以使用的通用的操作方法,但布尔属性除外
设定
标签对象.setAttribute('属性',属性值);
获取
var 变量 = 标签对象.getAttribute('属性');
删除
标签对象.removeAttribute('属性');
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="div1" class="div2" name="我是的div标签">我是标签对象</div> <a href="JavaScript:;" name="我是a标签">百度</a> <input type="checkbox" checked > <script> var oDiv = document.querySelector('div'); var oA = document.querySelector('a'); //获取 //div 不支持直接 操作 name属性 // 获取结果是 undefined var res = oDiv.name; console.log(res); // a标签 支持 name属性 可以 直接 操作 name属性 var res2 = oA.name; console.log(res2); //通过 通用操作方法 获取标签 name属性的属性值 var res3 = oDiv.getAttribute('name'); var res4 = oA.getAttribute('name'); console.log(res3); console.log(res4); //设定 oDiv.setAttribute('name','我是js设定的'); var res5 = oDiv.getAttribute('name'); console.log(res5); //删除 oA.removeAttribute('name'); var res6 = oA.getAttribute('name'); console.log(res6); </script> </body> </html>
3.标签支持的布尔属性
默认选中 多选 只读 禁用 ....
设定
标签对象.布尔属性 = 属性值
获取
var 变量 = 标签对象.属性属性
布尔属性操作的结果 不管是设定还是获取 一定是 布尔数值( true / false )
执行 是 true
不支持 是 false
var oIpn = document.querySelector('input'); //获取 var res = oIpn.checked; console.log(res); //设定 oIpn.checked = false; var res = oIpn.checked; console.log(res);
六、class属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="s1 s2">我是div</div> <script> // 获取标签对象 var oDiv = document.querySelector('div'); // 获取 class属性值 var res = oDiv.className ; console.log( res ); </script> </body> </html>
操作方法
1.新增
标签对象.classList.add(新增属性值)
//一次可以添加一个或者多个 多个属性值之间使用逗号间隔 oDiv.classList.add('s3','s4','s5'); var res = oDiv.className; console.log(res);
2.删除
标签对象.classList.remove(删除属性值);
// 删除 class属性值 oDiv.classList.remove('s1'); var res = oDiv.className; console.log(res);
3.替换
标签对象.classList.replace(原始,新的)
//替换class属性值 oDiv.classList.replace('s1','s10'); var res = oDiv.className; console.log(res);
4. 切换
标签对象.classList.toggle(切换属性值)
有 执行 删除
没有 执行 新增
//切换class属性值 //没有这个属性 就 执行 新增操作 oDiv.classList.toggle('s3'); var res = oDiv.className; console.log(res);
//有这个属性 就 执行 删除操作 oDiv.classList.toggle('s2'); var res = oDiv.className; console.log(res);