DOM（上）
DOM
DOM（Document Object Model）： 文档对象模型- 其实就是操作
html中的标签的一些方法 - 我们可以操作哪些内容
- 获取一个元素
- 移除一个元素
- 创建一个元素
- 向页面里面添加一个元素
- 给元素绑定一些事件
- 获取元素的属性
- 给元素添加一些
css样式 - …
DOM的核心对象就是docuemnt对象document对象是浏览器内置的一个对象，里面存储了html文档的所有内容和所有的操作html文档的函数方法，是JavaScript DOM 操作的顶级对象。DOM： 页面中的标签，我们通过js获取到以后，就把这个对象叫做 DOM 对象- DOM操作的基本顺序
- (1) 获取 页面中 html标签元素
- (2) 操作/设定 页面中 html标签元素
获取一个元素
- 通过
js代码来获取页面中的标签 - 获取到以后我们就可以操作这些标签了
querySelector
-
querySelector是按照选择器的方式来获取元素，也就是说，按照我们写css的时候的选择器来获取。 -
这个方法只能获取到一个元素，并且是页面中第一个满足条件的元素
-
如果没有符合条件的标签对象，执行结果是 null
<div id="div1" class="box" name="div3" abc="def">我是div</div> <ul> <li>我是第一个li</li> <li>我是第二个li</li> <li>我是第三个li</li> <li>我是第四个li</li> <li>我是第五个li</li> </ul> <ul> <li>我是第一个li</li> <li>我是第二个li</li> <li>我是第三个li</li> <li>我是第四个li</li> <li>我是第五个li</li> </ul> <script> // 获取页面中的第一个 div 元素 console.log(document.querySelector('div')) // 获取页面中第一个有 box 类名的元素 console.log(docuemnt.querySelector('.box')) // 获取页面中第一个 id 名为 div1 的元素 console.log(document.querySelector('#div1')) // 标签的属性和属性值 '[属性="属性值"]' console.log(document.querySelector('[name="div3"]')) console.log(document.querySelector('[abc="def"]')) // 通过 css选择器语法获取标签 // 先获取 第一个 ul标签对象 var oUl = document.querySelector('ul'); // 在整个文档中获取ul中的li标签 // 所有的ul标签中的子级li标签都会获取 var oUlLis1 = document.querySelectorAll( 'ul>li' ); // 在指定的ul标签对象中获取 li标签 // 只获取标签对象oUl中的li标签 var oUlLis2 = oUl.querySelectorAll( 'li' ); // 在 指定的ul标签对象中 获取 第一个li标签 var oUlFirstLi = oUl.querySelector( 'li:first-child' ); // 在 指定的ul标签对象中 获取 最后一个li标签 var oUlLastLi = oUl.querySelector( 'li:last-child' ); // 在 指定的ul标签对象中 获取 指定顺序的li标签 var oUlLi5 = oUl.querySelector( 'li:nth-child(5)' ); // 在 指定的ul标签对象中 获取 奇数个li标签 var oUlLiOdd = oUl.querySelectorAll( 'li:nth-child(odd)' ); // 在 指定的ul标签对象中 获取 偶数个li标签 var oUlLiEven = oUl.querySelectorAll( 'li:nth-child(even)' ); </script>
querySelectorAll
-
querySelectorAll是按照选择器的方式来获取元素 -
这个方法能获取到所有满足条件的元素，以一个 伪数组 的形式返回
-
伪数组 中每一个单元存储独立的标签对象
-
DOM操作必须是一个独立的标签对象，不能直接对伪数组进行操作
-
支持 forEach 循环遍历
伪数组：
1, 也有length属性
2. 也有索引下标，支持[]语法操作，可以按照索引下标获取和存储数据
3. 不具有数组的某些方法, 比如push(),pop()等；支持的函数方法和普通的数组不同。
// 获取页面中的所有的 div 元素
console.log(document.querySelectorAll('div'))
// 获取页面中所有有 box 类名的元素
console.log(docuemnt.querySelectorAll('.box'))
- 获取到的是一组数据，需要用索引来获取到准确的每一个
DOM元素
以上这两种方法支持所有html,css语法形式, 好用, 但是低版本IE浏览器不支持，推荐使用
html
标签名称
id属性值
class属性值
标签的属性和属性值
css
各种选择器
结构选择器
父子 后代 兄弟....
<body>
<div>我是的一个div</div>
<div>我是的二个div</div>
<div>我是的三个div</div>
<div>我是的四个div</div>
<script>
// 获取第一个div标签
// 在整个 html 文档中 获取 第一个 div标签
var oDiv1 = document.querySelector('div');
console.log( oDiv1 );
// 操作一个标签对象
oDiv1.style.color = 'red' ;
// 在整个 html 文档中获取所有div标签
var oDivs = document.querySelectorAll('div');
console.log( oDivs );
// 不能对伪数组直接进行操作
oDivs.style.color = 'red' ; //=>报错
// 要么通过 []语法获取其中一个标签对象进行操作
// 获取索引下标是3这个单元存储的div标签对象, 进行DOM操作设定
oDivs[3].style.color = 'blue';
// 要么循环遍历伪数组, 给所有的标签对象进行DOM操作
for( var i = 0 ; i <= oDivs.length-1 ; i++){
// oDivs 是 存储 div标签对象 的伪数组
// i 是 数据单元的索引下标
// oDivs[i] 是 每一个 独立的标签对象
oDivs[i].style.color = 'pink' ;
}
</script>
getElementById
-
getElementById是通过标签的id名称来获取标签的 -
因为在一个页面中
id是唯一的，所以获取到的就是一个元素 -
这里的
id名称前面是 没有# 的。 -
从这开始，以下几种方法不好用，但是低版本IE浏览器支持。不推荐使用。
<body> <div id="box"></div> <script> var box = document.getElementById('box'); console.log(box) // <div></div> </script> </body>- 获取到的就是页面中的那个 id 为 box 的 div 标签
getElementsByClassName
-
getElementsByClassName是用过标签的class名称来获取标签的 -
因为页面中可能有多个元素的
class名称一样，所以获取到的是一组元素 -
哪怕你获取的
class只有一个，那也是获取一组元素，只不过这一组中只有一个 DOM 元素而已<body> <div class="box"></div> <script> var box = document.getElementsByClassName('box'); console.log(box); //=> HTMLCollection [div.box] console.log(box[0]); //=> <div class="box"></div> </script> </body>- 获取到的是一组元素，是一个长得和数组一样的数据结构，但是不是数组，是 伪数组，不支持 forEach 循环遍历。
- 这个一组数据也是按照索引排列的，所以我们想要准确的拿到这个
div，需要用索引来获取
getElementsByTagName
-
getElementsByTagName是用标签的标签名称来获取标签的 -
因为页面中可能有多个元素的 标签名称一样，所以获取到的是一个伪数组 ，不支持 forEach 循环遍历
-
哪怕这个标签名只有一个，也是获取一组元素，只不过这一组中只有一个 DOM 元素而已
<body> <div>666</div> <script> var box = document.getElementsByTagName('div') console.log(box) //=> HTMLCollection [div] console.log(box[0]) //=> <div>666</div> </script> </body>- 和
getElementsByClassName一样，获取到的是一个长得很像数组的元素 - 必须要用索引才能得到准确的
DOM元素
- 和
getElementsByName
-
通过 name属性值获取所有符合的标签对象
-
执行结果是 一个 伪数组，支持 forEach 循环遍历
<div id="div1" class="div2" name="div3">我是div标签</div> <script> var oDiv = document.getElementsByName('div3'); console.log( oDiv6 ); //=> NodeList [div#div1.div2] </script>
操作属性
我们通过各种获取元素的方式获取到页面中的标签以后，就可以直接操作 DOM 元素的属性，直接把效果展示在页面上。
innerHTML
-
获取元素内部的
HTML结构 -
支持解析标签的操作
-
获取： var 变量 = 标签对象.innerHTML
-
设定：
标签对象.innerHTML = ' '; -
获取结果 和 设定内容 都是字符串格式
<body> <div> 我是div标签的内容 <p>我是p标签</p> <span>我是span标签</span> <h1>我是h1标签</h1> </div> <script> var oDiv = document.querySelector('div'); // 获取div标签内容 var res1 = oDiv.innerHTML ; console.log( res1 ); /* 输出： 我是div标签的内容 <p>我是p标签</p> <span>我是span标签</span> <h1>我是h1标签</h1> */ // 也可以用来获取标签内容 var oP = oDiv.querySelector('p'); var res2 = oP.innerHTML ; console.log( res2 ); //=> 我是p标签 //设置p标签里的内容 oP.innerHTML = '我是泡泡哥' var res3 = oP.innerHTML; console.log(res3); //=> 我是泡泡哥 // 设定div标签内容 // 赋值操作，会覆盖div标签中的原始内容 oDiv.innerHTML = '<a href="https://www.baidu.com">百度</a>' ; /* 页面只会显示写着百度这两个字的超链接 */ // += 当前 是 字符串拼接操作 // 在 oDiv.innerHTML 的原始内容基础上拼接超链接字符串 // 再将新的内容赋值给 oDiv.innerHTML oDiv.innerHTML += '<a href="https://www.baidu.com">百度</a>' ; </script> </body>
innerText
-
获取元素内部的文本（只能获取到文本内容，获取不到
html标签） -
不支持解析标签的操作
-
获取： var 变量 = 标签对象.innerText
-
设定： 标签对象.innerText = ’ ’ ;
-
获取结果 和 设定内容 都是字符串格式
<body> <div> 我是div标签的内容 <p>我是p标签</p> <span>我是span标签</span> <h1>我是h1标签</h1> </div> <script> var oDiv = document.querySelector('div'); var res2 = oDiv.innerText ; console.log( res2 ); /* 控制台输出： 我是div标签的内容 我是p标签 我是span标签 我是h1标签 */ oDiv.innerText = '<a href="https://www.baidu.com">百度</a>' ; /* 页面显示： <a href="https://www.baidu.com">百度</a> 会把<a href="https://www.baidu.com">百度</a>当作一个文本出现在div元素里面，而不会把<a href="https://www.baidu.com">百度</a>解析成标签。 */ </script> </body>
getAttribute
-
获取元素的某个属性（包括自定义属性）
<body> <div a="100" class="box" abc="def"></div> <script> var div = document.querySelector('div'); console.log(div.getAttribute('a')) ; //=> 100 console.log(div.getAttribute('class')); //=> box console.log(div.getAttribute( 'abc' )); //=> def </script> </body>
setAttribute
-
给元素设置一个属性（包括自定义属性）
<body> <div></div> <script> var div = document.querySelector('div'); div.setAttribute('a', 100); div.setAttribute('class', 'box'); div.setAttribute('abc', 'def'); console.log(div); //=> <div a="100" class="box" abc="def"></div> </script> </body>
removeAttribute
-
直接移除元素的某个属性
<body> <div a="100" class="box"></div> <script> var div = document.querySelector('div') div.removeAttribute('class') console.log(div) // <div a="100"></div> </script> </body>
style
-
专门用来给元素添加
css样式的 -
添加的都是 行内样式
-
语法： 标签对象.style.css属性 = css属性值
-
总结：
1, 在JavaScript中, - 表示的是减号, 会执行减法操作 因此带有 - 的css属性要写成小驼峰语法形式 例如：font-size --- fontSize 2, 如果属性值带有单位, 必须要写单位 3, 属性值的语法形式和css属性值语法形式完全相同 4, 语法形式是行内式语法形式 -
案例
<body> <button>设定</button> <div>我是div</div> <script> // 获取div标签对象 var oDiv = document.querySelector('div'); // 获取button标签对象 var oBtn = document.querySelector('button'); // 给button标签添加点击事件 oBtn.addEventListener( 'click' , function(){ // 设定 div标签的css样式 oDiv.style.color = 'red'; oDiv.style.width = '200px'; oDiv.style.height = '200px'; oDiv.style.background = 'pink'; oDiv.style.fontSize = '30px'; oDiv.style.border = '3px solid #000'; }) // <div style="width: 100px; height: 100px; background-color:pink;"></div> </script> </body>
value
- 标签对象.value 获取数据
- input、textarea、select>option 可以 获取/设定 数据
- 一般标签 起始数据都是空
- 输入数据后，可以通过点击事件获取标签中的数据
必须注意的问题：
1, 如果标签在 form表单标签中默认点击是跳转页面的效果
如果是在 from标签中需要做特殊处理
当前获取数据的标签 不要添加 form标签
2, select>option标签 配合
数据是 存储在 select标签中
3, option标签定义了 value属性，获取的数据是 value属性的属性值
option标签没有定义 value属性，获取的数据是 option标签的内容
为了数据的安全性 和 传参数据的简便，实际项目中 option标签的属性值一般都写 索引下标
4,
输入框输入的数据
input等标签获取的数据（例如：select>option获取的数据、textarea输入的内容等）
属性获取的属性值
获取的结果一定是 字符串类型，如果需要别的数值类型，要进行转化
<body>
账号 <input type="text"><br>
密码 <input type="password"><br>
城市
<select>
<!--option标签的属性值一般都写 索引下标-->
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">重庆</option>
<option value="4">天津</option>
</select>
<button>获取</button>
<script>
// 获取标签对象
var oIptName = document.querySelector('[type="text"]');
var oIptPwd = document.querySelector('[type="password"]');
var oSelCity = document.querySelector('select');
var oBtn = document.querySelector('button');
// 给 button 按钮 添加 点击事件
oBtn.addEventListener( 'click' , function(){
// 获取数据
var name = oIptName.value;
var pwd = oIptPwd.value;
var city = oSelCity.value;
console.log( name , pwd , city );
})
</script>
</body>
className
-
专门用来操作元素的 类名的
<body> <div class="box"></div> <script> var div = document.querySelector('div') console.log(div.className) // box </script> </body> -
也可以设置元素的类名，不过是全覆盖式的操作
<body> <div class="box"></div> <script> var div = document.querySelector('div') div.className = 'test' console.log(div) // <div class="test"></div> </script> </body>- 在设置的时候，不管之前有没有类名，都会全部被设置的值覆盖
标签支持的属性操作
1、标签对象一定支持的属性、属性值
id id属性
className class属性
title title属性
2、标签本身支持的布尔属性
标签对象.布尔属性 = 属性值
布尔属性的属性值 一定是 true / false
3、每一个标签直接支持的属性都不一样，不直接支持的属性不能通过 标签对象.属性 的方式进行操作。
语法：
标签对象.属性 = 属性值
设定 属性
var 变量 = 标签对象.属性
获取 属性
<body>
<!--
div标签可以设定name属性, 但是不是JavaScript内div标签对象直接支持的属性
-->
<div name="我是name">我是div标签</div>
<input type="text">
<script>
// 获取标签对象
var oDiv = document.querySelector('div');
console.dir(oDiv);
var oIpt = document.querySelector('input');
// 设定 标签对象属性
// 设定 id属性值
oDiv.id = '我是设定的id属性值';
// 设定 class属性值
oDiv.className = '我是设定的class属性值';
// 设定 title属性值
oDiv.title = '我是设定的title属性值';
// 设定 不支持的属性
//oDiv.name = '我是设定的name' ; //设定不上
// 获取属性值
// 直接支持的属性, 可以使用 标签对象.属性 的语法操作
var res1 = oDiv.id ;
console.log( res1 ); //=> 我是设定的id属性值
// 标签对象不直接支持的属性, 点语法不能操作
// 即使标签中定义了这个属性, 也不能使用 标签对象.属性 的语法操作
var res2 = oDiv.name ;
console.log( res2 ); //=> undefined(获取不到)
// 设定标签支持的布尔属性
oIpt.readOnly = true ;
oIpt.disabled = true ;
// 设定 input 为复选框
oIpt.type = 'checkbox' ;
oIpt.checked = true ;
var res = oIpt.checked ;
console.log( res );
</script>
</body>
点击事件
-
通过addEventListener() 这个事件监听方法，可以让我们给指定元素（标签）绑定点击事件。
-
语法：element. addEventListener ( ’click‘ , 回调函数)
回调函数可以是匿名函数，也可以是函数名称
回调函数中定义需要执行的程序。
<div>我是div</div>
<script>
// 获取div标签对象
var oDiv = document.querySelector('div');
// 绑定 点击 事件
oDiv.addEventListener( 'click' , function(){
console.log(111)
} );
oDiv.addEventListener( 'click' , fun );
function fun(){
console.log(222);
}
</script>
特殊标签的获取方式
/*
document 整个html文件
document.documentElement html标签
document.body body标签
document.head head标签
document.title title标签的内容
*/
// document 是 整个 html 文件
console.log( document );
// document.documentElement 是 html标签
console.log( document.documentElement );
// document.body 是 body标签
console.log( document.body );
// document.head 是 head标签
console.log( document.head );
// document.title 是 title标签的内容
console.log( document.title );
// 设定 title标签的内容
document.title = '我是设定的内容';
class属性值的操作
- 一个 class属性可以有多个属性值
- 新增：
标签对象.classList.add(); - 删除：
标签对象.classList.remove( ' 标签的class属性值 ' ); - 替换：
标签对象.classList.replace( 原始的class属性 , 新的class属性值 ); - 切换 (有就删除、没有就新增 )：
标签对象.classList.toggle();
<div>我是div标签</div>
<script>
// 获取标签对象
var oDiv = document.querySelector('div');
console.dir( oDiv );
// 新增
oDiv.classList.add( 'div1' );
oDiv.classList.add( 'div2' , 'div3' , 'div4' , 'div5' , 'div6' , 'div7' );
// 删除(选项卡案例用到了)
oDiv.classList.remove( 'div4' );
oDiv.classList.remove( 'div5' , 'div6' );
// 替换
// 参数1 原始的class属性
// 参数2 替换的新的class属性值
oDiv.classList.replace( 'div7' , 'div10' );
// 切换
// 有 就删除
oDiv.classList.toggle('div10');
// 没有 就新增
oDiv.classList.toggle('div10');
</script>
css样式属性值的获取
1、语法1 只能获取行内样式设定的css属性值
var 变量 = 标签对象.style.属性
2、语法2 可以获取任意语法设定css样式属性值
var 变量 = window.getComputedStyle(标签对象).属性 ;
执行结果 是 字符串格式，如果是数值一般有单位 100px
需要使用 parseInt() 获取数值部分
3、获取标签样式的兼容
普通浏览器
var 变量 = window.getComputedStyle(标签对象).属性 ;
低版本IE浏览器
var 变量 = 标签对象.currentStyle(属性) ;
4、兼容语法函数
参数1 element 是要获取css属性的标签对象
参数2 style 是要获取css的属性
function getEleStyle(element , style){
// 判断浏览器中有没有 window.getComputedStyle 方法
if(window.getComputedStyle){
// 普通浏览器
return window.getComputedStyle(element)[style];
}else{
// 兼容IE的方法
return element.currentStyle[style];
}
}
<style>
div{
width: 100px;
height: 100px;
background: blue;
}
</style>
<div style="color:red">我是div标签</div>
<script>
// 获取标签对象
var oDiv = document.querySelector('div');
// 获取 css样式属性值
// 可以获取 行内语法 的css样式属性值
var res1 = oDiv.style.color ;
console.log( res1 );
// 不能获取 内部/外部 css样式属性值
var res2 = oDiv.style.width ;
console.log( res2 );
// 可以获取任意语法形式的css样式属性值
// 获取 宽度 执行结果是 100px ，通过 parseInt 获取整数部分
var res3 = parseInt( window.getComputedStyle(oDiv).width ) ;
console.log( res3 );
var res4 = window.getComputedStyle(oDiv).color ;
console.log( res4 );
var res5 = window.getComputedStyle(oDiv).backgroundColor ;
console.log( res5 );
</script>
DOM（下）
DOM树就是由我们html结构中一个一个的节点构成的- 不光我们的标签是一个节点，我们写的文本内容也是一个节点，注释，包括空格都是节点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w8wdgbJx-1639144033831)(E:\课上资源\js\图片\DOM树.png)]
DOM节点
DOM的节点，一般分为常用的三大类： 元素节点 / 文本节点 / 属性节点- 通过
getElementBy...获取到的都是元素节点 - 通过
getAttribute获取的、写在每一个标签上的属性，就是属性节点 - 通过
innerText获取到的、标签里面写的文字就是文本节点
获取节点(了解)
实际项目中一般不使用节点操作语法来获取标签和操作标签 ，一般都是使用DOM语法获取标签 和操作、设定标签。
-
childNodes：获取某一个节点下 所有的子一级节点<body> <div> <p>hello</p> </div> <script> // 这个 oDiv 获取的是页面中的 div 元素，就是一个元素节点 var oDiv = document.querySelector('div') console.log(oDiv.childNodes) /* NodeList(3) 0: text 1: p 2: text length: 3 [[Prototype]]: NodeList */ </script> </body>- 我们会发现，拿到以后是一个伪数组，里面有三个节点
-
一个
text：从<div> 一直到 <p>中间有一个换行和一堆空格，这个是第一个节点，是一个文本节点- 一个
p：这个p标签就是第二个节点，这个是一个元素节点 - 一个
text：从</p> 一直到 </div>中间有一个换行和一堆空格，这个是第三个节点，是一个文本节点 - 这个时候就能看到我们有不同的节点类型了
- 一个
-
children：获取某一节点下所有的 标签节点<body> <div> <p>hello</p> </div> <script> var oDiv = document.querySelector('div') console.log(oDiv.children) /* HTMLCollection [p] 0: plength: 1 [[Prototype]]: HTMLCollection */ </script> </body>- 我们发现只有一个节点了，因为
children只要元素节点 - div 下面又只有一个元素节点，就是
p - 所以就只有一个，虽然只有一个，但是也是一个 伪数组
- 我们发现只有一个节点了，因为
-
firstChild：获取某一节点下子一级的 第一个节点<body> <div> <p>hello</p> </div> <script> var oDiv = document.querySelector('div') console.log(oDiv.firstChild) // #text </script> </body>- 这个是只获取一个节点，不再是伪数组了
- 获取的是第一个
-
第一个就是
<div> 一直到 <p>的那个换行和空格，是个文本节点 -
lastChild：获取某一节点下子一级的 最后一个节点<body> <div> <p>hello</p> </div> <script> var oDiv = document.querySelector('div') console.log(oDiv.lastChild) // #text </script> </body>- 只获取一个节点，不再是伪数组
- 获取的是最后一个
-
最后一个就是
</p> 一直到 </div>之间的换行和空格，是个文本节点 -
firstElementChild：获取某一节点下子一级 第一个元素节点<body> <div> <p>hello</p> </div> <script> var oDiv = document.querySelector('div') console.log(oDiv.firstElementChild) // <p>hello</p> </script> </body>- 只获取一个节点，不在是伪数组
- 获取的是第一个 元素节点
-
第一个元素节点就是
p标签，是一个元素节点 -
lastElementChild：获取某一节点下子一级 最后一个元素节点<body> <div> <p>hello</p> <p>world</p> </div> <script> var oDiv = document.querySelector('div') console.log(oDiv.lastElementChild) // <p>world</p> </script> </body>- 只获取一个节点，不在是伪数组
- 获取的是最后一个 元素节点
-
最后一个元素节点是
<p>world</p>，是一个元素节点 -
nextSibling：获取某一个节点的 下一个兄弟节点<body> <ul> <li id="a">hello</li> <li id="b">world</li> <li id="c">!!!</li> </ul> <script> var oLi = document.querySelector('#b') console.log(oLi.nextSibling) // #text </script> </body>- 只获取一个节点，不在是伪数组
- 获取的是
id="b"这个li的下一个兄弟节点
-
因为
id="b"的下一个节点，是两个li标签之间的换行和空格，所以是一个文本节点 -
previousSibling：获取某一个节点的 上一个兄弟节点<body> <ul> <li id="a">hello</li> <li id="b">world</li> <li id="c">!!!</li> </ul> <script> var oLi = document.querySelector('#b') console.log(oLi.previousSibling) // #text </script> </body>- 只获取一个节点，不在是伪数组
- 获取的是
id="b"这个li的上一个兄弟节点
-
因为
id="b"的上一个节点，是两个li标签之间的换行和空格，所以是一个文本节点 -
nextElementSibling：获取某一个节点的 下一个兄弟元素节点<body> <ul> <li id="a">hello</li> <li id="b">world</li> <li id="c">!!!</li> </ul> <script> var oLi = document.querySelector('#b') console.log(oLi.nextElementSibling) // <li id="c">!!!</li> </script> </body>- 只获取一个节点，不在是伪数组
- 获取的是
id="b"这个li的下一个兄弟元素节点
-
id="b"的下一个兄弟元素节点就是id="c"的li，是一个元素节点 -
previousElementSibling：获取某一个节点的 上一个兄弟元素节点<body> <ul> <li id="a">hello</li> <li id="b">world</li> <li id="c">!!!</li> </ul> <script> var oLi = document.querySelector('#b'); console.log(oLi.previousElementSibling) // <li id="a">hello</li> </script> </body>- 只获取一个节点，不在是伪数组
- 获取的是
id="b"这个li的上一个兄弟元素节点
-
id="b"的上一个兄弟元素节点就是id="a"的li，是一个元素节点 -
parentNode、parentElement：获取某一个节点的 父节点<body> <ul> <li id="a">hello</li> <li id="b">world</li> <li id="c">!!!</li> </ul> <script> var oLi = document.querySelector('#b') console.log(oLi.parentNode) // <ul>...</ul> console.log(oLi.parentElement) // <ul>...</ul> </script> </body>- 只获取一个节点，不在是伪数组
- 获取的是当前这个
li的父元素节点
-
因为这个
li的父亲就是ul，所以获取到的就是ul，是一个元素节点 -
attributes：获取某一个 元素节点 的所有 属性节点<body> <ul> <li id="a" a="100" test="test">hello</li> </ul> <script> var oLi = document.querySelector('#a') console.log(oLi.attributes) /* NamedNodeMap{} 0: id 1: a 2: test a: a id: id test: test length: 3 [[Prototype]]: NamedNodeMap */ </script> </body>- 获取的是一组数据，是该元素的所有属性，也是一个伪数组
- 这个
li有三个属性，id/a/test三个，所以就获取到了这三个
节点属性
nodeType
nodeType：获取节点的节点类型，用数字表示nodeType === 1表示该节点是一个 元素节点nodeType === 2表示该节点是一个 属性节点nodeType === 3表示该节点是一个 文本节点
nodeName
nodeName：获取节点的节点名称- 元素节点的
nodeName就是 大写标签名 - 属性节点的
nodeName就是 属性名 - 文本节点的
nodeName都是 #text
- 元素节点的
nodeValue
nodeValue： 获取节点的值- 元素节点没有
nodeValue - 属性节点的
nodeValue就是 属性值 - 文本节点的
nodeValue就是 文本内容
- 元素节点没有
<body>
<ul test="我是 ul 的一个属性">
<li>hello</li>
</ul>
<script>
// 先获取 ul
var oUl = document.querySelector('ul');
// 获取到 ul 下的第一个子元素节点，是一个元素节点
var eleNode = oUl.firstElementChild; //<li>...</li>
// 获取到 ul 的属性节点组合，因为是个组合，我们要拿到节点的话要用索引
var attrNode = oUl.attributes[0];
// 获取到 ul 下的第一个子节点，是一个文本节点
var textNode = oUl.firstChild;
console.log(eleNode.nodeType); // 1
console.log(attrNode.nodeType); // 2
console.log(textNode.nodeType); // 3
console.log(eleNode.nodeName); // LI
console.log(attrNode.nodeName); // test
console.log(textNode.nodeName); // #text
console.log(eleNode.nodeValue); // null
console.log(attrNode.nodeValue); // 我是 ul 的一个属性
console.log(textNode.nodeValue); // 显示 换行 + 空格 的效果
</script>
</body>
小结
| - | nodeType | nodeName | nodeValue |
|---|---|---|---|
| 元素节点 | 1 | 大写标签名 | null |
| 属性节点 | 2 | 属性名 | 属性值 |
| 文本节点 | 3 | #text | 文本内容 |
操作DOM节点*
节点操作是DOM操作方式中的一种
1、之前的DOM操作操作的是标签对象，需要先获取标签对象，再操作标签对象的内容、属性和样式
2、节点操作可以直接操作html文档中的任意内容（文字 标签 注释）。html文档中的所有内容， 节点操作都可以获取之后直接操作
创建节点
-
createElement：用于创建一个元素节点 -
创建一个空标签，创建的就是一个DOM标签对象，支持所有DOM操作，可以通过DOM操作设定节点的内容、属性、样式
// 创建一个 a 元素节点 var oA = document.createElement('a') console.log(oA) // <a></a> // 设定 oA 标签对象 的 DOM操作 // 设定属性内容 oA.id = 'a1'; oA.className = 'a2'; oA.href = 'JavaScript:;'; oA.innerHTML = '我是设定的a标签的内容'; // 设定css样式 oA.style.color = 'red'; // 绑定点击事件 oA.addEventListener('click' , function(){ console.log(111); }) // 设定oA 标签对象 的 DOM操作之后，上面的console.log(oA)会输出: //<a id="a1" class="a2" href="JavaScript:;" style="color: red;">我是设定的a标签的内容</a>- 创建出来的就是一个可以使用的 a 元素
-
createTextNode：用于创建一个文本节点// 创建一个文本节点 var oText = document.createTextNode('我是一个文本') console.log(oText) // "我是一个文本"
写入节点
-
appendChild：在一个元素节点里面的末尾新增一个节点 -
语法：
父节点.appendChild(要插入的子节点)// 创建一个 div 元素节点 var oDiv = document.createElement('div'); var oText = document.createTextNode('我是一个文本'); var oA = document.createElement('a'); // 向 div 中追加一个文本节点 oDiv.appendChild(oText) console.log(oDiv) // <div>我是一个文本</div> // 将 a 标签写入到 div标签 ‘里面’ 的末位 oDiv.appendChild( oA ); -
insertBefore：在某一个节点前插入一个新的节点 -
语法：
父节点.insertBefore(要插入的节点，插入在哪一个节点的前面)<body> <div> <p>我是一个 p 标签</p> </div> <script> var oDiv = document.querySelector('div') var oP = oDiv.querySelector('p') // 创建一个元素节点 var oSpan = document.createElement('span') // 将这个元素节点添加到 div 下的 p 的前面 oDiv.insertBefore(oSpan, oP) console.log(oDiv) /* <div> <span></span> <p>我是一个 p 标签</p> </div> */ </script> </body>
删除节点
-
removeChild：移除某一节点下的某一个节点 -
语法：
父节点.removeChild(要移除的字节点)<body> <div> <p>我是一个 p 标签</p> </div> <script> var oDiv = document.querySelector('div') var oP = oDiv.querySelector('p') // 移除 div 下面的 p 标签 oDiv.removeChild(oP) console.log(oDiv) // <div></div> </script> </body>
修改节点
-
replaceChild：将页面中的某一个节点替换掉 -
语法：
父节点.replaceChild(新节点，旧节点)<body> <div> <p>我是一个 p 标签</p> </div> <script> var oDiv = document.querySelector('div') var oP = oDiv.querySelector('p') // 创建一个 span 节点 var oSpan = document.createElement('span') // 向 span 元素中加点文字 oSpan.innerHTML = '我是新创建的 span 标签' // 用创建的 span 标签替换原先 div 下的 p 标签 oDiv.replaceChild(oSpan, oP) console.log(oDiv) /* <div> <span>我是新创建的 span 标签</span> </div> */ </script> </body>
克隆节点
cloneNode(): 只克隆标签对象本身（标签和标签属性）cloneNode(true): 克隆标签本身和标签内容- 所有的节点克隆都不会克隆标签绑定的事件
<body>
<div id="div1" class="div2" name="div3" index="div4">
我是div标签的内容
<p>我是div标签中的p标签</p>
<h1>我是div中的h1标签</h1>
</div>
<div></div>
<script>
// 获取div标签对象
var oDiv = document.querySelectorAll('div')[0];
var oDiv2 = document.querySelectorAll('div')[1];
oDiv.addEventListener('click' , function(){
console.log(111);
})
// 克隆语法1
var res1 = oDiv.cloneNode();
console.log( res1 );
//<div id="div1" class="div2" name="div3" index="div4"></div>
// 克隆语法2
var res2 = oDiv.cloneNode(true);
console.log( res2 );
/*
<div id="div1" class="div2" name="div3" index="div4">
我是div标签的内容
<p>我是div标签中的p标签</p>
<h1>我是div中的h1标签</h1>
</div>
*/
oDiv2.appendChild(res2);
console.log( oDiv2 );
/*
<div>
<div id="div1" class="div2" name="div3" index="div4">
我是div标签的内容
<p>我是div标签中的p标签</p>
<h1>我是div中的h1标签</h1>
</div>
</div>
*/
</script>
</body>
获取元素的偏移量
- 就是元素在页面上相对于参考父级的左边和上边的距离
offsetParent
- 获取元素的偏移量参考父级
- 其实就是假设你要给一个元素 绝对定位 的时候
- 它是根据谁来进行定位的
- 那么这个元素的偏移量参考父级就是谁
offsetLeft 和 offsetTop
- 获取的是元左边的偏移量和上边的偏移量
offsetLeft： 该元素相对于参考父级的左侧偏移量offsetTop： 该元素相对于参考父级的上侧偏移量
获取元素尺寸
- 就是获取元素的 “占地面积”，也叫作标签的占位
- css中盒子模型决定标签占位
offsetWith 和 offsetHeight
offsetWidth： 获取的是元素 内容 + padding + border 的宽度offsetHeight： 获取的是元素 内容 + padding + border 的高度
clientWidth 和 clientHeight
-
clientWidth： 获取的是元素 内容 + padding 的宽度 -
clientHeight： 获取的是元素 内容 + padding 的高度
clientTop 和 clientLeft
clientTop：上边框线的宽度clientLeft： 左边框线的宽度
offsetTop 和 offsetLeft
- 距离 JavaScript定位父级的上、左间距
- JavaScript 定位父级不是css定位意义上的定位父级
- JavaScript 定位父级数据存储在 标签对象.offsetParent 中
- 标签对象.offsetParent 获取的结果:
- 若结果是 body， 那么定位父级是 html中 的 body 标签
- 若结果是 null，那么定位父级是 视窗窗口
- 标签有固定定位，定位父级是 视窗窗口
- 标签有定位、父级标签没有定位，定位父级是 body
- 父级标签有定位属性 ， 定位父级是 父级标签
<style>
*{
margin: 0;
padding: 0;
}
h1{
width: 500px;
height: 500px;
background: pink;
margin: 50px auto;
/* position: relative; */
}
div{
width: 100px;
height: 100px;
border: 10px solid #000 ;
/* position: fixed; */
position: relative;
}
</style>
<body>
<h1>
<div></div>
</h1>
<script>
// 获取标签对象
var oDiv = document.querySelector('div');
// 获取标签的占位
// 内容 + padding + border
var width1 = oDiv.offsetWidth ;
console.log( width1 );
// 内容 + padding
var width2 = oDiv.clientWidth ;
console.log( width2 );
// 上边框线宽度
var borderTop = oDiv.clientTop ;
console.log( borderTop );
// 下边框线宽度
var borderLeft = oDiv.clientLeft ;
console.log( borderLeft );
// div标签的定位父级
console.log( oDiv.offsetParent );
// 距离 定位父级的 间距
console.log( oDiv.offsetTop );
console.log( oDiv.offsetLeft );
</script>
</body>
- 以上方法获取到的尺寸是没有单位的数字，直接就是数值数据。
- 当元素在页面中不占位置的时候， 获取到的是 0
display: none;元素在页面不占位visibility: hidden;元素在页面占位
622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
