2020-09-28

最新推荐文章于 2024-09-21 11:34:18 发布

月光派件中。

最新推荐文章于 2024-09-21 11:34:18 发布

阅读量73

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46064684/article/details/108853219

版权

js 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

innerText、innerHTML、textContent

innerText：可以设置内容，但是不解析标签，不显示效果（谷歌、火狐、IE8都支持）
innerHTML：可以设置内容，解析标签，可以显示效果
textContent：可以设置内容（谷歌、火狐支持，IE8不支持）

<body>
	<input type="button" value="按钮" id="btn">
	<div>真好看</div>
	<script src="common.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		mFun$("btn").onclick = function (){
			// var con = document.getElementsByTagName("div")[0].innerText = "真衰啊!";
			//原格式输出
			// var con = document.getElementsByTagName("div")[0].innerText = "<i>真衰啊!</i>";
	
			// var con = document.getElementsByTagName("div")[0].innerHTML = "真衰啊!";
			//可以解析 
			// var con = document.getElementsByTagName("div")[0].innerHTML = "<i>真衰啊!</i>";

			// var con = document.getElementsByTagName("div")[0].textContent = "真衰啊!";
			//原格式输出
			// var con = document.getElementsByTagName("div")[0].textContent = "<i>真衰啊!</i>";
		console.log(con);
		}
		//如果一个浏览器不支持指定属性,返回的是一个undefined
		//设置任意的标签的任意内容
		//element 元素\标签  text 要设置的内容
		function setInnerText(element,text){
			if(typeof element.textContent == "undefined"){
				return element.innerText = text;
			}else{
				return element.textContent = text;
			}
		}
		var div = document.getElementsByTagName("div")[0]
		 mFun$("btn").onclick = function (){
			 setInnerText(div,"随便");
		 }
		 
		//获取标签中任意内容
		function getInnerText(element){
			if(typeof element.textContent == "undefined"){
				return element.innerText;
			}else{
				return element.textContent;
			}
		} 
	</script>
</body>

自定义属性

HTML标签中不存在属性，需要自己定义的属性叫做自定义属性
设置自定义属性 setAttribute("设置的属性名","设置的属性值")
获取自定义属性 getAttribute('属性名')
移除自定义属性 removeAttribute移除属性[自定义/系统的]

自定义属性的设置与获取

<body>
	<ul id="u">
		<li>1号</li>
		<li>2号</li>
		<li>3号</li>
	</ul>
	<script src="common.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//1- 根据id为u的获取指定元素,获取该标签中所有的li
		var li = mFun$("u").getElementsByTagName("li");
		//2- 遍历所有li标签
		for(var i = 0;i < li.length;i++){
			//li[i].mv = "萝莉"+(i+1)+"号";//直接给dom对象没有给标签
			//设置每个li标签属性为 mv  值为"萝莉"+(i+1)+"号"
			li[i].setAttribute("mv","萝莉"+(i+1)+"号");
			//对每个li注册点击事件
			li[i].onclick = function(){
				//弹出获取的属性信息
				alert(this.getAttribute("mv"));
			}
		}
	</script>
</body>

移除自定义属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.c1{
				width: 200px;
				height: 200px;
				background-color: darkorange;
			}
		</style>
	</head>
	<body>
		<input type="button" value="按钮" id="btn">
		<div mv ="萝莉" class="c1"></div>
		<script src="common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//removeAttribute 移除属性[自定义\系统的]
			mFun$("btn").onclick = function(){
				//document.getElementsByTagName("div")[0].removeAttribute("mv");
				//document.getElementsByTagName("div")[0].removeAttribute("class");
			}
		</script>
	</body>
</html>