DOM属性的基本操作[掌握]
概念
什么是元素的属性？class就是元素的属性，写在元素内的所有东西都是元素的属性，比如link的href，img的src等
元素的属性是什么，分为两种，一种叫内置属性，一种叫非内置属性。
内置属性的操作(通过js)
| 属性 | 含义 |
|---|---|
| innerHTML／innerText | 返回值是当前元素的内容 |
| id | 返回值是当前元素的ID |
| title | 获取title的标签值，这个title是从document中获取的 |
| className | 返回值是当前元素的class名称 |
| href | 返回值是当前的href的值 |
以上这些属性既可以获取，也可以设置!
例1:获取下列表单的节点的各种值,并且进行修改
<div id="box" class="first" feng="admin">123</div>
<a href="lunaxiede" title="这是a" target="_blank">zheshia</a>
<img src="asd/asd/asdasdsa.jpg" alt="这是img的alt" title="这是图片"/>
<input type="text" name="user" id="user" value="" />
js获取节点的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="box" class="first" feng="admin">123</div>
<a href="lunaxiede" title="这是a" target="_blank">zheshia</a>
<img src="asd/asd/asdasdsa.jpg" alt="这是img的alt" title="这是图片"/>
<input type="text" name="user" id="user" value="没有断奶的孩子" />
<script>
// 内置属性:就是标签自带的属性 如input的 type name class id
// img的内置属性 src alt class id width height
// 非内置属性(自定义属性): 人为在标签上设置的属性
// div上属性的获取
// var divObj = document.getElementById('box');
// // id的获取
// console.log(divObj.id)
// // class的获取 className
// console.log(divObj.className);
// // 自定义属性的获取不能直接使用.
// console.log(divObj.feng);
// //console.log(divObj)
// // div上属性的设置
// // id的设置
// divObj.id = 'latiao';
// // class的设置
// divObj.className = 'kissshao';
// a标签属性的操作
// var aObj = document.getElementsByTagName('a')[0];
// // console.log(aObj)
// // 获取title
// console.log(aObj.title);
// // href属性获取
// console.log(aObj.href);
// // target的获取
// console.log(aObj.target);
// // 设置a标签的href和title值
// aObj.title = '哈哈,我是a';
// aObj.href = 'http://www.baidu.com';
// 图片的属性获取设置
// var imgObj = document.querySelector('img');
// //console.log(imgObj)
// // src的获取和设置
// console.log(imgObj.src);
// imgObj.src = '../images/8.jpg';
// input框属性的获取和设置
var inputObj = document.getElementById('user');
//console.log(inputObj);
// type和name属性的获取
//console.log( inputObj.type);
//console.log( inputObj.name);
//value的获取和设置
console.log( inputObj.value);
inputObj.value = '长的白白胖胖';
</script>
</body>
</html>
以上属性因为是标签固有的,所以可以直接使"."的方式调用.
非内置属性(自定义属性)
setAttribute(name,value)
描述：给指定对象设置属性名和属性值
参数：name指属性名，value指属性值
例如：divObj.setAttribute(‘one’,1);
obox.setAttribute("a","110")
obox.setAttribute("feng","root")
脚下留心:
这里添加的属性都增加到了.标签上!
getAttribute(name)
描述：获取指定对象的属性名的属性值
返回：属性值
console.log(obox.feng) // 获取不到值
console.log(obox.getAttribute("feng"))
removeAttribute(name)
描述：移除指定对象的属性
obox.removeAttribute("a")
例1:移除p中自定义的属性
<p goodsId='25'>因噎废食 </p>
自定义数据属性
H5中规定的非标准属性指定方式,但是必须用**data-**前缀告诉浏览器,data-后面跟什么都行.
<div id="app" data-myname='jack' data-appId="12345">
访问方式
div.dataset.myname
名称如 data-my-name,data-My-Name同过myName来访问.data-myname,data-myName通过**+**访问
节点公共的属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wZNoFk2e-1662464042065)(/1564713467244.png)]
父节点.firstChild：返回第一个子节点,包含空白节点(文本节点)
.firstElementChild:返回第一个子节点
父节点.lastChild：返回最后一个子节点(包含空白)
lastElementChild 返回最后一个子节点(不包含空白)
nextSibling属性返回元素节点之后的兄弟节点（包括文本节点、注释节点即回车、换行、空格、文本等等）
nextElementSibling属性只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）(IE7/8不支持）
previousSibling 属性返回元素节点之前的兄弟节点（包括文本节点、注释节点）；
previousElementSibling 属性只返回元素节点之前的兄弟元素节点（不包括文本节点、注释节点),只读属性；(IE7/8不支持）
childNodes：返回子节点列表(包括,文本节点,注释节点)，返回时一个组数
children: 只返回标签元素节点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6Z4ic66Y-1662464042066)(/1568035755261.png)]
节点
parentNode：返回父节点
其他
nodeName：返回节点名字
例1:获取文本节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h3>过春节了</h3>
<ul>
<li>饺子</li>
<li>油条</li>
<li>炸鱼块</li>
<li>麻叶</li>
</ul>
<p>小酒一顿,又斗地主,只剩内裤</p>
<script>
var ulObj = document.querySelector('ul')
//第一个 子节点的获取
// #text 表示文本节点,其实是空白
var li1 = ulObj.firstChild; // 包含空白节点
// console.log(li1)
var li2 = ulObj.firstElementChild; // 返回元素节点,不包含空白
// console.log(li2)
// 最后一个子节点的获取
var li3 = ulObj.lastChild; // #text 空白节点
// console.log(li3)
li4 = ulObj.lastElementChild; // 返回最后一个标签节点,不包含空白
// console.log(li4)
// 下一个兄弟节点
var p1 = ulObj.nextSibling;// #text 空白节点
// console.log(p1)
var p2 = ulObj.nextElementSibling; // 返回最后一个标签节点,不包含空白节点
// console.log(p2)
// 上一个兄弟节点
var h3Obj1 = ulObj.previousSibling; // #text 空白节点
// console.log(h3Obj1);
var h3Obj2 = ulObj.previousElementSibling; // 返回最后一个标签节点,不包含空白节点
// console.log(h3Obj2)
//父节点的返回
var parObj = ulObj.parentNode;
// console.log(parObj)
//节点名字的返回,注意是大写
var name = ulObj.nodeName;
// console.log(name);
// 获取所有的子节点
var chil1 = ulObj.childNodes; // 包含空白节点
// console.log(chil1)
var chil2 = ulObj.children; // 返回所有的表签元素子节点
console.log(chil2)
// 中午每人一块鱼
console.log(chil2[2]);
var pObj = ulObj.nextElementSibling;
console.log(pObj.innerHTML); // 获取标签在内的所有内容
console.log(pObj.innerText)
// 设置时,会替换原来的内容
//pObj.innerHTML = '<b>这是加粗的</b>'; // 可以设置html标签
pObj.innerText =pObj.innerText+ '<b>这是加粗的</b>'; // 会把标签当做普通的文本
// console.log(pp.nodeValue)
</script>
</body>
</html>
特殊集合
document 中还有几个特殊的集合,可以快速的访问文档中的公共部分
获取a标签
document.anchors 获取文档所有带name的a元素
document.links 获取所有带href属性的a元素
<a href="" name="test">测试</a>
<a href="" name="user">测试</a>
let aObjs = document.anchors;
console.log(aObjs);
获取form元素
document.forms 获取页面中所有的form元素
<form action="" method="get">
user
<input type="text"> pwd
<input type="text">
</form>
console.log(document.forms[1]);
获取img元素
document.img 获取所有的img元素
<img src="" alt="">
console.log(document.images);
练习
隔行变色
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.active{
background: #ccc;
}
</style>
</head>
<body>
<ul>
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
</ul>
</body>
<script type="text/javascript">
var ali = document.querySelectorAll("li")
for(var i=0;i<ali.length;i++){
if(i%2 == 0){
ali[i].className = "active";
}
}
</script>
</html>
进度条
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
width: 400px;
height: 300px;
position: relative;
border: solid 1px black;
margin: 50px auto;
}
.bar {
width: 0px;
height: 30px;
background: green;
border-radius: 6px;
position: absolute;
top: 135px;
line-height: 30px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<div id="box">
<div class="bar">
<span>0%</span>
</div>
</div>
<button onclick="fn()">开始</button>
</body>
<script type="text/javascript">
// 1 获取节点
var barObj = document.querySelector('.bar');
var spanObj = barObj.firstElementChild;
// 2 设置变量
var times = ''; // 定时器返回值
var target = 400;
var speed = 10; // 步进值
var tmpW = 0;
function fn() {
times = setInterval(function () {
// 3增加步进值
tmpW += speed;
// 4 判断是否达到目标值
if (tmpW >= target) {
// 5 清空定时器,且设置到终点
clearInterval(times);
barObj.style.width = target + 'px';
spanObj.innerHTML = '100%';
} else {
//设置百分比
spanObj.innerHTML = parseInt((tmpW / target) * 100) + '%';
barObj.style.width = tmpW + 'px';
}
}, 30)
}
</script>
</html>
节点的操作
节点创建[理解]
元素节点：document.createElement(tag标签名称);
文本节点：document.createTextNode(文本内容);
自定义属性设置：node.setAttribute(名称，值);
节点追加[理解]
父节点.appendChild(子节点); // 向父节点添加最后一个子节点
父节点.insertBefore(newnode,oldnode); // 将newnode放到oldnode的前边,将节点放到指定的位置
<div id="far">
<div id="one"></div>
</div>
<div id="two"></div>
//js
var far = document.getElementById('far');
var one = document.getElementById('one');
var two = document.getElementById('two');
far.insertBefore(two,one)
//js执行之后的效果
<div id="far">
<div id="two"></div>
<div id="one"></div>
</div>
//insertBefore是插入到参考节点之前,也有剪切的效果
节点删除[理解]
父节点.removeChild(子节点);
父节点.remove(); 删除自身
实现对元素的增删改查
//html
<div id="far">
<div id="son"></div>
</div>
//js
var far = document.getElementById('far');
var son = document.getElementById('son');
var result = far.removeChild(son);
console.log(result); //<div id="son"></div>
//js执行之后的效果
<div id="far">
</div>
节点的克隆
cloneNode() 克隆节点
**语法: **element.cloneNode([true]) ;
参数是boolean值,不传参数默认是false,为浅拷贝.传true,则是深拷贝
//html
<div id="box">
div里面的内容
<p>p元素</p>
</div>
//js
var box = document.getElementById('box');
console.log(box.cloneNode()); //<div id="box"></div>
console.log(box.cloneNode(true)) //<div id="box"> div里面的内容 <p>p元素</p> </div>
节点替换
replaceChild() 替换节点使用其他节点替换掉自己的某个子节点
**语法: **element.replaceChild(替换的节点, 被替换的子节点);
<div id="far">
<div id="one"></div>
</div>
<div id="two"></div>
//js
var far = document.getElementById('far');
var one = document.getElementById('one');
var two = document.getElementById('two');
far.replaceChild(two,one);
//js执行之后的效果
<div id="far">
<div id="two"></div>
</div>
CSS DOM(扩展)
功能：使js可以动态给HTML添加css样式属性 （行内样式）
语法：对象名.style.CSS属性转化为js后的名称 = 属性值;
例如：
color:red;
obj.style.color = ‘red’;
obj.style.background = ‘red url()’
background-image:url()
obj.style.backgroundImage = ''url();
font-size:10
obj.style.fontSize = ;
【CSS属性转化为js后的名称规则】
1、一个单词直接写，如：color，background，margin，width，height
2、多个单词，第二个单词去掉“-”并且“首字母大写”：
font-size => fontSize
font-family => fontFamily
border-width => borderWidth
案例:点击改变盒子的样式和内容
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="box">内容部分</div>
<button id="btn1">改变宽度</button>
<button id="btn2">改变高度</button>
<button id="btn3">改变颜色</button>
<button id="btn4">改变内容</button>
<script>
// 1 获取节点
var btn1Obj = document.querySelector('#btn1');
var boxObj = document.querySelector('#box');
// 2 绑定点击事件
btn1Obj.onclick = function(){
// 3 修改box的css的width
boxObj.style.width = '400px';
}
// 高度的改变
var btn2Obj = document.querySelector('#btn2');
btn2Obj.onclick = function(){
// 修改高度
boxObj.style.height = '400px';
}
// 颜色的修改
var btn3Obj = document.querySelector('#btn3');
btn3Obj.onclick = function(){
// 修改高度
boxObj.style.backgroundColor = 'yellow';
}
// 内容的修改
var btn4Obj = document.querySelector('#btn4');
btn4Obj.onclick = function(){
// 修改高度
boxObj.innerHTML = '朝闻道,夕死可矣';
}
</script>
</body>
</html>
脚下留心
1 通过js操作css样式时,一定要加px
boxObj.style.width = '400px';
2 通过js添加的样式都会以行内样式的方式追加
非行内样式的获取
现象
.test{
height:200px;
}
<div style="width:200px" class="test" id="id">asd</div>
在这个例子如果我们用 obj.style.height获取的数值将会为空，
a）在ie浏览器里，我们用到obj的currentStyle方法，来获取。 obj.currentStyle["height"]。
b)在非ie浏览器里，我们需要用到window自带的方法，getComputedStyle(obj).height;
这样我们就可以通过js获取元素属性了
综合写法:
获取非行内样式（兼容问题）
function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值
if(obj.currentStyle){ //针对ie获取非行间样式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //针对非ie
};
};
浏览器元素的尺寸[掌握]
offsetParent：获取元素的最近的具有定位属性（absolute或者relative）的父级元素。如果都没有则返回body
(与当前元素最近的经过定位(position不等于static)的父级元素)
offsetLeft：表示元素的左外边框至offsetParent元素的左内边框之间的像素距离
2
offsetTop：表示元素的上外边框至offsetParent元素的上内边框之间的像素距离
clientWidth/clientHeight：元素视窗宽度/高度
clientWidth = width+左右padding
clientHeight = height + 上下padding
offsetWidth/offsetHeight：元素实际宽度/高度
offsetWidth = width + 左右padding + 左右boder
offsetHeiht = height + 上下padding + 上下boder
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wOtTHzJs-1662464042067)(/1560692509866.png)]
例题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box{
width: 200px;
height: 100px;
background: red;
position: absolute;
top:40px;
left:40px;
padding: 20px;
border: solid 10px black;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var divObj = document.querySelector('#box')
// 获取最近具有定位属性的父级元素
// var par = divObj.offsetParent;
// console.log(par)
// 获取元素到父级元素的top值
// console.log(divObj);
var tops = divObj.offsetTop;
//console.log(tops)
// 获取元素左外边框到父级元素的left值
var left = divObj.offsetLeft;
//console.log(left);
// 获取元素的clientWidth
// clientWidth = width+左右padding
var cw = divObj.clientWidth;
//console.log(cw);
// 获取元素的可视高度
// clientHeight = height+上下padding
var ch = divObj.clientHeight;
// console.log(ch);
// 获取元素的完全宽度
// offsetWidth = width+左右padding+左右border
var sw = divObj.offsetWidth;
console.log(sw);
// offsetHeight = height+上下padding+上下border
// 获取元素的完全高度
var sh = divObj.offsetHeight;
console.log(sh);
</script>
</body>
</html>
扩展
DOM 中的表单元素的属性
- value 用于大部分表单元素的内容获取(option除外)
- type 可以获取input标签的类型(输入框或复选框等)
- disabled 禁用属性
- checked 复选框选中属性
- selected 下拉菜单选中属性
代码的实现
<body>
<input type="text" value="123" >
<input type="button" value="按钮" >
<script>
// value
var input = document.querySelector('input');
var btn = document.querySelectorAll('input')[1];
//console.log(input.value);
// input.value = '456';
//type
//console.log(input.type);
//console.log(btn.type);
//
// input.type = 'button';
// btn.type = 'text';
//disabled 禁用
// 在html中只需要写属性名的属性,在js中通过true/false来控制
// 如果赋值为true,就是相当于写了这个属性
// 如果赋值为false,就是相当于没写这个属性
// btn.onclick = function(){
// input.disabled = false;
// }
//
//console.log(input.disabled);
</script>
</body>
案例 :
- 全选反选
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
<input type="button" value=" 反 选 " id="btn">
</div>
<script>
// 需求:
// 1. 全选选中,下面的复选框都选中,否则,下面的都不选中
// 1.1 获取元素
var j_cbAll = document.getElementById('j_cbAll');
var j_tb = document.getElementById('j_tb');
var cbs = j_tb.getElementsByTagName('input');
// 1.2 点击全选的时候,全选的状态变成了什么样
j_cbAll.onclick = function(){
// console.log(this.checked);
// 1.3 根据全选的状态啊,给下面四个赋值
// if(this.checked){
// //如果是true
// for(var i = 0; i < cbs.length; i++) {
// cbs[i].checked = true;
// }
// }else{
// //证明全选没选中
// for(var i = 0; i < cbs.length; i++) {
// cbs[i].checked = false;
// }
// }
// if(this.checked){
// //如果是true
// for(var i = 0; i < cbs.length; i++) {
// cbs[i].checked = this.checked;
// }
// }else{
// //证明全选没选中
// for(var i = 0; i < cbs.length; i++) {
// cbs[i].checked = this.checked;
// }
// }
for(var i = 0; i < cbs.length; i++) {
cbs[i].checked = this.checked;
}
}
//
// 2. 下面每一个选中,或者不选中的时候,都应该判断一下,是否下面都选中, 如果都选中了,全选也选中,如果有一个没选中,全选不选中
// 2.1 获取元素
// 2.2 给下面的每一个复选框注册点击事件
for(var i = 0; i < cbs.length; i++) {
cbs[i].onclick = cbClick;//这样写可以节省内存
}
//下面的复选框点击时触发的事件
// 判断当前四个复选框是否都选中,如果都选中,就让全选也选中,否则,全选不选中
function cbClick(){
//2.3 判断下面四个是否都选中,如果选中,全选选中,如果有没选中的,全选不选中
var flag = true;//先假设四个都是选中的
for(var i = 0; i < cbs.length; i++) {
//判断有没有未选中的
if(cbs[i].checked == false){
//证明有没选中的
// 如果有没选中的就将flag修改为false
flag = false;
}
}
//当for循环执行完了之后,就可以通过flag判断是否都选中了
// 如果flag是true,证明都选中了,否则,有未选中的
// 2.4 根据flag的状态,给全选赋值
// if(flag){
// j_cbAll.checked = true;
// }else{
// j_cbAll.checked = false;
// }
// if(flag){
// j_cbAll.checked = flag;
// }else{
// j_cbAll.checked = flag;
// }
j_cbAll.checked = flag;
}
// 3. 点击反选按钮下面这个四个复选框,取反他们的状态. 取反之后,判断四个复选框的状态,如果都选中,全选也选中,否则,全选不选中
// 3.1 获取元素
var btn = document.getElementById('btn');
// 3.2 给反选按钮注册点击事件
btn.onclick = function(){
// 3.3 在事件 处理函数中,给下面四个取反, 取反之后,判断4个复选框的状态,修改全选的状态
// 3.3.1 取反四个复选框
for(var i = 0; i < cbs.length; i++) {
// if(cbs[i].checked){
// //能够进来,证明是选中,应该取消
// cbs[i].checked = false;
// }else{
// //证明原本是取消的状态
// cbs[i].checked = true;
// }
// if(cbs[i].checked){
// //能够进来,证明是选中,应该取消
// cbs[i].checked = !cbs[i].checked;
// }else{
// //证明原本是取消的状态
// cbs[i].checked = !cbs[i].checked;
// }
cbs[i].checked = !cbs[i].checked;
}
// 3.3.2 取反之后,根据他们的状态,修改全选的状态
cbClick();
}
</script>
</body>
</html>
nclick = function(){
// 3.3 在事件 处理函数中,给下面四个取反, 取反之后,判断4个复选框的状态,修改全选的状态
// 3.3.1 取反四个复选框
for(var i = 0; i < cbs.length; i++) {
// if(cbs[i].checked){
// //能够进来,证明是选中,应该取消
// cbs[i].checked = false;
// }else{
// //证明原本是取消的状态
// cbs[i].checked = true;
// }
// if(cbs[i].checked){
// //能够进来,证明是选中,应该取消
// cbs[i].checked = !cbs[i].checked;
// }else{
// //证明原本是取消的状态
// cbs[i].checked = !cbs[i].checked;
// }
cbs[i].checked = !cbs[i].checked;
}
// 3.3.2 取反之后,根据他们的状态,修改全选的状态
cbClick();
}
</script>
1844
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
