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);
}
五 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标签
