DOM

最新推荐文章于 2022-08-07 15:31:14 发布

LW0512

最新推荐文章于 2022-08-07 15:31:14 发布

阅读量113

点赞数

分类专栏： dom 文章标签： dom

本文链接：https://blog.csdn.net/LW0512/article/details/108835973

版权

dom 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

DOM

innerText与innerHTML与textContent

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="button" value="按钮" id="btn">
		<div>真好看</div>
		<script src="common.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*
				innerText  可以设置内容 不能解析标签 不显示效果 IE\谷歌\火狐 支持
				innerHTML  可以设置内容 解析标签 显示效果
				textContent 可以设置内容  IE8不支持\谷歌\火狐支持
			*/
		    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>

自定义属性的设置与获取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul{
				cursor:pointer;
			}
		</style>
	</head>
	<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">
			//设置自定义属性 setAttribute("设置的属性名","设置的属性值")
			//获取自定义属性 getAttribute("属性名");
			//set 设置  get 获取
			//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>
</html>

移除自定义属性

<!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">
			//removeAttzh
			
			// ribute 移除属性[自定义\系统的]
			mFun$("btn").onclick = function(){
				//document.getElementsByTagName("div")[0].removeAttribute("mv");
				//document.getElementsByTagName("div")[0].removeAttribute("class");
			}
		</script>
	</body>
</html>

自定义属性引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: aquamarine;
				margin: 10px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div mv = "萝莉1号"></div>
		<div mv = "萝莉2号"></div>
		<div mv = "萝莉3号"></div>
		<div mv = "萝莉4号"></div>
		<script type="text/javascript">
			//HTML标签中不存在属性,需要自己定义的属性叫自定义属性
			//获取自定义属性 get -- 获取 Attribute属性  获取属性信息
			var div = document.getElementsByTagName("div");
			for(var i = 0; i < div.length;i++){
				div[i].onclick = function (){
					console.log(this.getAttribute("mv"));
				}
			}
		</script>
	</body>
</html>

LW0512

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM

DOMinnerText与innerHTML与textContent<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <input type="button" value="按钮" id="btn"> <div>真好看</div>
复制链接

扫一扫

专栏目录