WebAPI——DOM元素属性与节点

元素属性

元素本质上就是一个对象

属性有内置系统属性和程序员自定义属性

获得元素属性

点语法

内置属性可以获取
如果是使用点语法赋值的自定义属性，可以获取，但是行内写好的自定义属性，点语法无法获取

	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>

在这里插入图片描述

WebAPI——DOM元素属性与节点

元素属性

获得元素属性

设置元素属性

删除元素属性

节点

节点的属性

文档节点（document）

元素节点

属性节点

猜你喜欢