Javascript学习笔记：DOM属性

最新推荐文章于 2022-10-21 13:33:39 发布

Zijeak

最新推荐文章于 2022-10-21 13:33:39 发布

阅读量154

点赞数

分类专栏：前端文章标签： javascript js dom

本文链接：https://blog.csdn.net/qq_18404993/article/details/104274751

版权

前端专栏收录该内容

53 篇文章 1 订阅

订阅专栏

固有属性Properties ：元素创建是被自动绑定的一系列属性，可以通过 对象名.属性名 来访问
自定义属性attributes：不能通过 对象名.属性名来访问，需要通过对象名.attributes来访问，返回一个类数组对象namedNodeMap。
在这里插入图片描述

myReady(function(){
		var content = document.getElementById("content");
		console.log(content.id);
		console.log(content.className);
		console.log(content.xxx);
});

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>练习网页</title>
	<script src='domReady.js'></script>
	<script type="text/javascript">
		myReady(function(){
			var content = document.getElementById("content");
			console.log(content.attributes);
		});
	</script>
</head><body>
	<div id='content' class='content' xxx='123' yyy='456' zzz='789'>
		<h1>这是标题</h1>
		<h2>这也是标题</h2>
		<h3>这同样是标题</h3>
	</div>
</body>
</html>

在这里插入图片描述
获取自定义属性

myReady(function(){
		var content = document.getElementById("content");
		result = content.attributes;
		console.log(result.xxx.value);
		console.log(result.yyy);
		console.log(result.getNamedItem('zzz').nodeValue);
		console.log(result['zzz'].nodeValue);
});

在这里插入图片描述
删除自定义属性

result.removeNamedItem('zzz');

在这里插入图片描述
新增自定义属性

myReady(function(){
	var content = document.getElementById("content");
	result = content.attributes;

	//创建属性对象
	var attr = document.createAttribute('data-title');
	attr.value = 'ooo';
	result.setNamedItem(attr);
});

操作固有属性
通过对象名.属性名获得和修改固有属性。

myReady(function(){
	var content = document.getElementById("content");
	content.id = 'nwu';
});

操作固有属性和自定义属性的通用方法
getAttribute()：可以获得指定属性名的属性值。
注意：
style属性通过对象名.属性名（结果是CSSStyleDeclaration对象）和getAttribute()（结果是字符串）两种方法获得的结果不同。
onclick属性通过对象名.属性名（结果是onclick(event)事件对象）和getAttribute()（结果是字符串）两种方法获得的结果不同。

<!DOCTYPE html>
<html>
<head>
	<title>练习网页</title>
	<script src='domReady.js'></script>
	<script type="text/javascript">
		myReady(function(){
			var content = document.getElementById("content");
			console.log(content.getAttribute('xxx'));
			//style属性
			console.log(content.getAttribute('style'));
			console.log(content.style);
			//onclick属性
			console.log(content.getAttribute('onclick'));
			console.log(content.onclick);
		});
	</script>
</head><body>
	<div id='content' style="color:lightblue" onclick="alert('0')" xxx='123'>
		<h1>这是标题</h1>
		<h2>这也是标题</h2>
		<h3>这同样是标题</h3>
	</div>
</body>
</html>

在这里插入图片描述
setAttrute()：接收两个参数，第一个为属性名称，第二个为属性的值。属性名称为一个不存在的属性时会创建它。
removeAttribute()：传入属性名称，移除该属性。

布尔属性
（1）checkbox、radio中的checked属性，非空字符串、true都是选中状态。任何能转化为true的值都是选中，任何能转化为false的值都是不选中。
（2）select的Option中的selected属性，其余同上。
（3）表单元素（例如input）的readOnly属性
（4）表单元素（例如input）的disabled属性
（5）select的multiple属性
（6）hidden属性
字符串属性
大部分属性都是字符串属性
id、title、href、src、lang、dir、accesskey、name、value、class
所有html元素都有的属性，也称全局属性：
accesskey、class、contenteditable（是否可编辑元素的内容）、dir、hidden、id、lang、spellcheck、style、tabindex、title、translate

data属性
以data-开头，用于存储页面或应用程序定义的私有数据。

在这里插入图片描述
class属性
classList属性

<!DOCTYPE html>
<html>
<head>
	<title>练习网页</title>
	<script src='domReady.js'></script>
	<script type="text/javascript">
		var CL = {
			addClass:function(ele,cls){
				ele.classList.add(cls);
			},
			removeClass:function(ele,cls){
				ele.classList.remove(cls);
			},
			hasClass:function(ele,cls){
				return ele.classList.contains(cls);
			},
			toggleClass:function(ele,cls){
				return ele.addClass.toggle(cls);
			}
		};
		myReady(function(){
			var content = document.getElementsByTagName('div');
			var div = content[0];
			//使用封装类操作
			CL.addClass(div,'ddd');
			CL.removeClass(div,'aaa');
			CL.toggleClass(div,'bbb');
			//直接操作
			div.classList.add('eee');
			div.classList.remove('ddd');
			console.log(div.classList.contains('eee'));

		});
	</script>
</head><body>
	<div class='aaa bbb ccc'>
		<h1>这是标题</h1>
	</div>
</body>
</html>