元素属性
元素本质上就是一个对象
属性有内置系统属性和程序员自定义属性
获得元素属性
- 点语法
- 内置属性可以获取
- 如果是使用点语法赋值的自定义属性,可以获取,但是行内写好的自定义属性,点语法无法获取
let box = document.getElementById('items');
// 内置属性可以获取
console.log(box.id);//items
console.log(box.className); //box className--->类名
// 如果使用点语法赋值的自定义属性,可以获取,但是行内写好的自定义属性,点语法无法获取
box.gf = '对象';
console.log(box.gf); //对象自定义属性,点语法是无法获取的
console.log(box.cus); //undefined
- 中括号与Key
- 内置属性可以获取
- 如果是使用中括号+key值赋值的自定义属性,可以获取,但是行内写好的自定义属性,点语法无法获取
let box = document.getElementById('items');
console.log(box['id']);
console.log(box['className']);
console.log(box['cus']);
getAttribute()
- 内置或者自定义的属性都可以获取
let box = document.getElementById('items');
console.log(box.getAttribute('id'));
console.log(box.getAttribute('class'));
console.log(box.getAttribute('cus'));
设置元素属性
- 点语法
- 可以设置,就是不会在行内显示
let divBox = document.querySelector('div');
divBox.id = 'box';
divBox.className = 'items';
div.test = '测试'; //可以设置,就是不会在行内显示
console.dir(divBox);
- 中括号+key值
- 可以设置,就是不会在行内显示
let divBox = document.querySelector('div');
divBox['id'] = 'box';
divBox['class'] = 'items';
divBox['test'] = 'items';
setAttribute()
- 可以设置,还可以在行内结构显示
let divBox = document.querySelector('div');
divBox.setAttribute('id', 'setId');
divBox.setAttribute('class', 'setClass');
divBox.setAttribute('cus', '自定义'); //可以设置,还可以在行内结构显示
divBox.setAttribute('hello', 'world')
删除元素属性
- 点语法
- 删除了值名还在
let box = document.getElementById('box');
//删除了值名还在
box.id='';
box.className='';
- 中括号+key值
- 删除了值名还在
let box = document.getElementById('box');
box['id']='';
box['className']='';
- removeAttribute()
- 值和名全部删除
// 值和名全部删除
box.removeAttribute('id');
box.removeAttribute('class');
box.removeAttribute('csu');
- 案例
- 切换文字(通过改变类名实现)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
width: 70px;
height: 20px;
line-height: 20px;
list-style: none;
background-color: #ccc;
float: left;
margin-right: 10px;
text-align: center;
border-radius: 5px;
font-size: 12px;
margin-left: 10px;
}
.red {
color: red;
}
</style>
</head>
<body>
<ul>
<li>你来点我啊</li>
<li>你来点我啊</li>
<li>你来点我啊</li>
<li>你来点我啊</li>
<li>你来点我啊</li>
<li>你来点我啊</li>
</ul>
</body>
<script>
// 获取元素对象
let liArr = document.getElementsByTagName('li');
// console.log(liArr);
for(let i = 0;i < liArr.length;i++) {
// 点击事件
liArr[i].onclick = function () {
// 排他思想,在点击之前恢复原样
for(let j = 0;j < liArr.length;j++) {
liArr[j].setAttribute('class','');
liArr[j].innerHTML = '你来点我啊'
}
this.setAttribute('class','red');
this.innerHTML ='我变红了';
}
}
</script>
</html>
- 如何添加索引
<script>
let btnArr = document.getElementsByTagName('button');
for (let i = 0; i < btnArr.length; i++) {
// 给每个按钮设置一个索引值
// 按钮拥有一个index序号/属性 --->i+1
btnArr[i].setAttribute('index', i + 1);
btnArr[i].onclick = function () {
this.innerHTML = ('大家好我是第' + this.getAttribute('index') + '个按钮');
}
}
</script>
节点
节点
:Node
——构成HTML文档最基本的单元- 常用节点分四类:
文档节点
:整个HTML文档元素节点
:HTML文档中的HTML标签属性节点
:元素的属性文本节点
:HTML标签中的文本内容
节点的属性
文档节点(document)
- 文档节点document,代表的是整个HTML文档,网页中的所有节点都是它的子节点。
- document对象作为window对象的属性存在的,我们不用获取可以直接使用。
- 通过该对象我们可以在整个文档访问内查找节点对象,并可以通过该对象创建各种节点对象。
元素节点
- HTML中的各种标签都是元素节点,这也是我们最常用的一个节点。
- 浏览器会将页面中所有的标签都转换为一个元素节点,我们可以通过document的方法来获取元素节点。
属性节点
- 属性节点表示的是标签中的一个一个的属性,这里要注意的是属性节点并非是元素节点的子节点,而是元素节点的一部分。
- 可以通过元素节点来获取指定的属性节点。
• 例如:元素节点.getAttributeNode("属性名");
• 注意:我们一般不使用属性节点
案例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
/*
* 定义一个函数,专门用来为指定元素绑定单击响应函数
* 参数:
* idStr 要绑定单击响应函数的对象的id属性值
* fun 事件的回调函数,当单击元素时,该函数将会被触发
*/
function myClick(idStr , fun){
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
window.onload = function(){
//为id为btn01的按钮绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//查找#bj节点
var bj = document.getElementById("bj");
//打印bj
//innerHTML 通过这个属性可以获取到元素内部的html代码
alert(bj.innerHTML);
};
//为id为btn02的按钮绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//查找所有li节点
//getElementsByTagName()可以根据标签名来获取一组元素节点对象
//这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
//即使查询到的元素只有一个,也会封装到数组中返回
var lis = document.getElementsByTagName("li");
//打印lis
//alert(lis.length);
//变量lis
for(var i=0 ; i<lis.length ; i++){
alert(lis[i].innerHTML);
}
};
//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
//查找name=gender的所有节点
var inputs = document.getElementsByName("gender");
//alert(inputs.length);
for(var i=0 ; i<inputs.length ; i++){
/*
* innerHTML用于获取元素内部的HTML代码的
* 对于自结束标签,这个属性没有意义
*/
//alert(inputs[i].innerHTML);
/*
* 如果需要读取元素节点属性,
* 直接使用 元素.属性名
* 例子:元素.id 元素.name 元素.value
* 注意:class属性不能采用这种方式,
* 读取class属性时需要使用 元素.className
*/
alert(inputs[i].className);
}
};
//为id为btn04的按钮绑定一个单击响应函数
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
//获取id为city的元素
var city = document.getElementById("city");
//查找#city下所有li节点
var lis = city.getElementsByTagName("li");
for(var i=0 ; i<lis.length ; i++){
alert(lis[i].innerHTML);
}
};
//为id为btn05的按钮绑定一个单击响应函数
var btn05 = document.getElementById("btn05");
btn05.onclick = function(){
//获取id为city的节点
var city = document.getElementById("city");
//返回#city的所有子节点
/*
* childNodes属性会获取包括文本节点在呢的所有节点
* 根据DOM标签标签间空白也会当成文本节点
* 注意:在IE8及以下的浏览器中,不会将空白文本当成子节点,
* 所以该属性在IE8中会返回4个子元素而其他浏览器是9个
*/
var cns = city.childNodes;
//alert(cns.length);
/*for(var i=0 ; i<cns.length ; i++){
alert(cns[i]);
}*/
/*
* children属性可以获取当前元素的所有子元素
*/
var cns2 = city.children;
alert(cns2.length);
};
//为id为btn06的按钮绑定一个单击响应函数
var btn06 = document.getElementById("btn06");
btn06.onclick = function(){
//获取id为phone的元素
var phone = document.getElementById("phone");
//返回#phone的第一个子节点
//phone.childNodes[0];
//firstChild可以获取到当前元素的第一个子节点(包括空白文本节点)
var fir = phone.firstChild;
//firstElementChild获取当前元素的第一个子元素
/*
* firstElementChild不支持IE8及以下的浏览器,
* 如果需要兼容他们尽量不要使用
*/
//fir = phone.firstElementChild;
alert(fir);
};
//为id为btn07的按钮绑定一个单击响应函数
myClick("btn07",function(){
//获取id为bj的节点
var bj = document.getElementById("bj");
//返回#bj的父节点
var pn = bj.parentNode;
alert(pn.innerHTML);
/*
* innerText
* - 该属性可以获取到元素内部的文本内容
* - 它和innerHTML类似,不同的是它会自动将html去除
*/
//alert(pn.innerText);
});
//为id为btn08的按钮绑定一个单击响应函数
myClick("btn08",function(){
//获取id为android的元素
var and = document.getElementById("android");
//返回#android的前一个兄弟节点(也可能获取到空白的文本)
var ps = and.previousSibling;
//previousElementSibling获取前一个兄弟元素,IE8及以下不支持
//var pe = and.previousElementSibling;
alert(ps);
});
//读取#username的value属性值
myClick("btn09",function(){
//获取id为username的元素
var um = document.getElementById("username");
//读取um的value属性值
//文本框的value属性值,就是文本框中填写的内容
alert(um.value);
});
//设置#username的value属性值
myClick("btn10",function(){
//获取id为username的元素
var um = document.getElementById("username");
um.value = "今天天气真不错~~~";
});
//返回#bj的文本值
myClick("btn11",function(){
//获取id为bj的元素
var bj = document.getElementById("bj");
//alert(bj.innerHTML);
//alert(bj.innerText);
//获取bj中的文本节点
/*var fc = bj.firstChild;
alert(fc.nodeValue);*/
alert(bj.firstChild.nodeValue);
});
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input class="hello" type="radio" name="gender" value="male"/>
Male
<input class="hello" type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>