DOM操作
是文档对象模型 , 是JavaScript操作html文档的方法.
DOM操作的方式方法:
1, 获取操作的对象 也就是 需要操作的标签 , 通过JavaScript定义的DOM操作函数方法来获取标签对象 .
2, 通过JavaScript定义的DOM操作函数方法 对 html标签对象执行操作
DOM操作获取标签对象的方法:
-
方便好用, 兼容性差 (低版本IE浏览器不支持)
var 变量 = document.querySelector('条件'); 获取整个html文件中 第一个符合条件的标签对象 执行结果是一个独立的标签对象 DOM操作可以直接操作一个对象的标签对象. var 变量 = 标签对象.querySelectorAll('条件'); 获取标签对象中 所有符合条件的标签对象 如果没有符合条件的标签对象 ,执行结果是空数组 , (数组.length 是 0 的数组 是空数组) var 变量 = document.querySelectorAll('条件'); 获取整个html文件中 所有符合条件的标签对象 执行结果是一个伪数组 伪数组中每一个单元存储的数据数值 就是符合条件的标签对象 DOM操作不可以直接操作标签对象伪数组. 必须 伪数组[索引下标] 获取一个标签对象进行DOM操作, 或者 循环遍历 伪数组 获取每一个独立的标签对象 进行DOM操作.-
支持的条件语法:
所有html css 支持的语法属性 都可以定义: '标签名称' '.class属性值' '#id属性值' '[属性="属性值"]' 'ul>li' ... (只要是html , css支持的都可以)
-
-
兼容效果好 , 使用不方便
var 变量 = document.getElementById('id属性值'); 获取结果是一个独立的标签对象 var 变量 = document.getElementByClassName('class属性值') ; 获取结果是一个伪数组 , 不能使用forEach var 变量 = document.getElementsByTagName('标签名称'); 获取结果是一个 伪数组 不能forEach var 变量 = document.getElementsByName('标签name属性值'); 获取结果是一个 伪数组 可以forEach
总结:
document.querySelector('条件');
获取整个html文档中 第一个符合条件的标签对象.
获取的是一个独立的标签对象 , 可以直接执行DOM操作.
也可以是已经获取的标签对象中获取符合条件的标签对象
标签对象.querySelector('条件');
如果没有符合条件的标签对象 , 执行结果是 null
document.querySelectorAll('条件');
获取整个html文档中 所有符合条件的标签对象
获取的是一个标签对象伪数组 ,
不能直接执行DOM操作 , 必须要 伪数组[索引下标] 获取一个独立的标签对象执行DOM操作 , 或者是循环遍历伪数组获取每一个独立的标签对象执行DOM操作.
也可以是 已经获取的标签对象中 获取符合条件的标签对象
标签对象.querySelectorAll('条件');
如果没有符合条件的标签对象 , 执行结果是null
数组.length 是0 的数组 是 空数组.
一 .DOM内容操作
标签内容:
1, 标签对象.innerHTML
支持解析标签的操作
获取
var 变量 = 标签对象.innerHTML ;
设定
标签对象.innerHTML = '' ;
2, 标签对象.innerText
不支持解析标签的操作
获取
var 变量 = 标签对象.innerText ;
设定
标签对象.innerText = '' ;
获取结果和设定内容都是字符串格式.
二 DOM 标签的属性操作
标签的属性操作:
1, 标签支持的可以直接操作的属性
id id属性
className class属性
title title属性
操作语法:
获取:
var 变量 = 标签对象.id
var 变量 = 标签对象.ClassName
var 变量 = 标签对象.title
设定:
标签对象.id = 属性值
标签对象.ClassName = 属性值
标签对象.title = 属性值
每一类标签 直接支持的属性不同.
2, 标签支持的布尔属性
布尔属性
属性名和属性值一样的
(默认选中, 多选, 只读, 禁用 ....)
设定
标签对象.布尔属性 = 属性值
获取
var 变量 = 标签对象.布尔属性
布尔属性的操作结果 无论是获取还是设定 , 属性值一定是true(执行) / false(不支持)
3, 标签属性的通用操作方法 , 布尔属性除外
获取的结果是字符串类型.
设定
标签对象.setAttribute('属性', 属性值);
获取
var 变量 = 标签对象.getAttribute = ('属性');
删除
标签对象.removeAttribute('属性');
<script>
var oDiv = document.querySelector('div');
var oA = document.querySelector('a');
var oIpt = document.querySelector('input');
console.dir( oDiv ); // 控制台输出属性属性值
console.dir( oA );
// 标签支持的属性 id class title属性
// 设定
oDiv.id = '设定的id属性值' ;
oDiv.className = '设定的class属性值' ;
oDiv.title = '设定的title';
// 获取
var res1 = oDiv.id ;
console.log( res1 );
var res2 = oDiv.className ;
console.log( res2 );
// 标签属性的通用操作方法
// 获取
// div 不支持直接 操作 name属性
// 获取结果是 undefined
// 通过 通用操作方法 获取 div标签 name属性的属性值
var oDivName = oDiv.getAttribute( 'name' );
console.log( oDivName );
// a标签 支持 name属性 可以 直接 操作 name属性
var oAName1 = oA.name ;
console.log( oAName1 );
// 可以使用 通用方法 操作 name属性
var oAName2 = oA.getAttribute('name') ;
console.log( oAName2 );
// 设定
oDiv.setAttribute('name' , '我是js设定的');
console.log( oDiv );
// 删除
oA.removeAttribute( 'name' );
// 布尔属性
// 获取
var res = oIpt.checked ;
console.log( res );
// 设定
oIpt.checked = false ;
</script>
三 标签数据
一般标签是 标签内容使用标签对象.innerHTML或者标签对象.innerText 操作数据 , 特殊标签 input textarea select>option 使用标签对象.value 来操作数据.
-
获取数据:
一般状况下 , input等标签默认状况下是没有数据的 , 一般是配合事件获取数据数值 . var 变量 = 标签对象.value; 通过 对象.value 获取的数据一定是 字符串类型.如果需要 ,可以转化为数值类型 -
设定数据:
标签对象.value = 数据数值;
select>option
如果option标签没有设定value属性 , 获取数据的结果是option标签的内容.
如果option标签设定value属性 , 获取数据的结果是value属性的属性值.
实际项目中 option标签 一般设定value属性值为 从 0 开始的整数数值.
四 点击事件
- 通过事件监听语法给标签绑定点击事件 ,
标签对象.addEventListener(‘click , 回调函数’);
回调函数可以是 匿名函数 / 函数名称
(回调函数中定义需要执行的程序.)
<script>
// 获取div标签对象
var oDiv = document.querySelector('div');
// 绑定点击事件 (匿名函数)
oDiv.addEventListener('click' , function(){console.log(111)}) ;
// 绑定点击事件 (函数名称)
oDiv.addEventListener('click',fun);
function fun(){
console.log(222);
}
- on语法绑定
标签对象.onclick = function(){ }
事件绑定的三要素 :
1, 标签对象 : 事件源 , 也就是绑定事件的标签对象
2, click : 事件类型 , 也就是绑定给标签对象的事件的类型.
3, function(){} : 事件处理函数 , 也就是触发事件时执行的函数程序 , 是回调函数语法形式, 可以是函数名称, 可以是匿名函数.
on语法 和 事件监听语法的区别:
on语法 是 通过 = 赋值绑定的事件处理函数
= 本质上是覆盖赋值 , 后赋值的数据会覆盖之前存储的数据 ,
也就是on语法 一个标签对象相同的事件类型只能赋值绑定
一个事件处理函数 , 如果赋值绑定多个处理函数 , 后赋值的
事件处理函数会覆盖之前存储的事件处理函数 , 最终执行的
是最后赋值的事件处理函数.
事件监听语法的兼容:
标准浏览器
标签对象.addEventListener('click',function(){ });
低版本IE浏览器
标签对象.attachEvent('onclick',function(){ }) ;
事件的删除语法:
1, on语法绑定的事件的删除
因为 on语法是 = 等于赋值操作 , 只要赋值一个null/空函数时 , 触发事件时, 就没有调用执行的函数程序 , 达到删除事件的效果.
2, 事件监听语法的删除
需要调用专门的删除函数方法 , 标签对象.removeEventListener('事件类型',事件处理函数) ;
它只能删除绑定的是函数名称的事件处理函数 , 如果绑定的是匿名函数则不能删除.
实际操作中 , 如果不需要删除事件处理函数 , 推荐使用匿名函数语法形式.
实际操作中 , 如果必须要删除事件处理函数 , 只能绑定函数名称.
五 class属性
class属性的操作方法:
class属性可以有多个属性值 , 有特殊的操作方法
1,新增class属性值
标签对象.classList.add(新增属性值)
一次可以添加一个或多个属性值 , 多个属性值直接使用逗号间隔.
2,删除class属性值
标签对象.classList.remove(删除属性值)
3,替换class属性值
标签对象.classList.replace(原始属性值,新的属性值)
4,切换class属性值
标签对象.classList.toggle(属性值)
原始状态有属性值就执行删除操作 , 原始状态没有属性值就执行新增操作.
<div class="s1 s2 s3 s4"></div>
<script>
var oDiv = document.querySelector('div');
// 新增class属性值
oDiv.classList.add('m1');
//删除class属性值
oDiv.classList.remove('s1');
//替换class属性值
oDiv.classList.replace('s2' , 'm2');
//切换class属性值
oDiv.classList.toggle('t2'); // 原始class属性值没有t2 ,添加t2
oDiv.classList.toggle('m2'); // 原始class属性值有m2 , 删除m2
六 css样式设定和获取
设定
DOM操作css样式 :
JavaScript中设定css样式语法只有一种.
标签对象.style.css属性 = css属性值
设定结果是行内样式.
1, JavaScript中 - 是减号 , 执行减法操作 , 因此带有 - 的css属性要写成小驼峰语法形式 . 如: font-size -> fontSize
2, 如果带有单位必须要写单位
3, 属性值语法形式和css属性值语法形式完全相同
4, 语法形式是行内语法形式
<button>设定</button>
<div>我是div</div>
<script>
// 获取div标签对象
var oBut = document.querySelector('button');
// 获取button标签对象
var oDiv = document.querySelector('div');
// 给button标签添加点击事件
oBut.addEventListener('click',function(){
//设置div标签的样式
oDiv.style.color = 'red';
oDiv.style.width = '62px';
oDiv.style.height = '40px';
oDiv.style.backgroundColor = 'pink';
oDiv.style.fontSize = '15px';
oDiv.style.border = '3px double #f5f5f5';
oDiv.style.textAlign = 'center';
oDiv.style.lineHeight = '40px';
oDiv.style.marginTop = '20px';
})
获取
css样式属性值的获取:
语法1: 只能获取行内样式的属性值
var 变量 = 标签对象.style.属性
语法2: 非行内样式的获取
var 变量 = window.getComputedStyle(标签对象).属性 ;
可以获取任意语法设定的css样式 , 获取结果如果带有单位 , 可以parseInt() 获取整数部分.
兼容问题:
window.getComputedStyle(标签对象).属性
标准浏览器语法
标签对象.currentStyle.属性
低版本IE浏览器语法
// 获取标签对象
var oDiv = document.querySelector('div');
// 获取css样式
// 行内式可以使用 标签对象.style.属性
var dColor = oDiv.style.color ;
console.log( dColor );
// 非行内样式的获取
var resColor = window.getComputedStyle( oDiv ).color ;
console.log( resColor );
七 标签的占位
css样式中盒子模型属性决定一个标签的占位
标签对象.offsetWidth
标签对象.offsetHeight
内容 + padding + border
标签对象.clientWidth
标签对象.clientHeight
内容 + padding
标签对象.clientTop
标签对象.clientLeft
上 , 左边框线的宽度
标签对象.offsetTop
标签对象.offsetLeft
当前标签是距离JavaScript定位父级的间距
定位父级是谁 , 储存在标签对象.offsetParent属性中.
1, 标签没有父级 / 父级没有定位
定位父级是 body ,也就是HTML文档
2, 标签有父级 且父级有定位
定位父级是父元素
3, 标签有固定定位
定位父级是null , 也就是视窗窗口
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 5000px;
}
div{
width: 600px;
height: 600px;
margin: 100px auto;
background: pink;
border: 3px solid #000;
position: relative;
}
div p{
width: 100px;
height: 100px;
padding: 50px;
margin: 150px;
border: 10px solid #000;
background: cyan;
position: absolute;
/* display: none; */
}
</style>
...
<div>
<p></p>
</div>
...
// 获取标签对象
var oDiv = document.querySelector('div');
var oP = document.querySelector('p');
// 获取div标签的占位
// offsetWidth offsetHeight (内容 + padding +border )
console.log(oDiv.offsetHeight); // 606
console.log(oDiv.offsetWidth); //606
// clientWidth clientHeight (内容 + padding)
console.log(oDiv.clientHeight); //600
console.log(oDiv.clientWidth); //600
// clientTop clientLeft (上 左 边框线的宽度)
console.log(oDiv.clientTop); //3
console.log(oDiv.clientLeft); //3
console.log(oP.clientTop); //10
console.log(oP.clientLeft); //10
// 定位父级
console.log(oP.offsetParent);
console.log( oP.offsetTop ) ; // 150
console.log( oP.offsetLeft ) ; //150
八 DOM操作的顶级对象
document -> 也就是整个HTML文档
document.documentElement -> html标签
document.body -> body标签
document.head -> head标签
document.title -> title标签
九 节点操作
是DOM操作的另外一种语法形式 , DOM操作是以html标签对象为操作单位 , 获取的是html中的标签 , 操作的是html标签对象 .
节点操作 是以DOM节点为操作对象 , html文档中的所有内容都可以作为DOM节点 ,
例如: 标签 , 文本 , 注释 , 属性
实际项目中一般不会使用DOM节点操作来获取标签 , 操作标签等,
一般使用DOM节点操作 用来 创建标签节点 , 克隆标签节点 , 写入标签节点等 .
节点的获取操作
1, 获取标签对象中的所有节点
标签对象.childNodes
2, 获取标签对象中的标签节点
标签对象.children
3, 获取标签对象的第一个节点
标签对象.firstChild
4, 获取标签对象的最后一个节点
标签对象.lastChild
5, 获取标签对象中的第一个标签节点
标签对象.firstElementChild
6, 获取标签对象中的最后一个标签节点
标签对象.lastElementChild
7, 获取标签对象的上一个节点
标签对象.previousSibling
8, 获取标签对象的下一个节点
标签对象.nextSibling
9, 获取标签对象的上一个标签节点
标签对象.previousElementSibling
10, 获取标签对象的下一个标签节点
标签对象.nextElementSibling
11, 获取标签对象的父级节点
标签对象.parentNode
12, 获取标签对象的属性节点
标签对象.attributes
创建标签节点
1, var 变量 = document.createElement(‘标签名称’);
创建一个空标签
2, 通过DOM操作写入内容 , 通过 innerHTML添加内容 , 还可以添加样式 , 绑定事件 .
3, 写入标签节点:
标签对象.appendChild(标签节点);
在标签对象的末位新增标签对象节点
标签对象.insertBefore(写入节点 , 在谁之前);
在标签对象中 指定的标签之前写入新的节点
总结:
如果要写入的标签结构比较简单 , 可以使用节点操作.
如果要写入的标签结构比较复杂 , 使用字符串写入.
节点的克隆
1, 只克隆标签对象本身
var 变量 = 标签对象.cloneNode();
2, 克隆标签对象本身 和标签对象的内容
var 变量 = 标签对象.cloneNode(true);
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
