innerHTML


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--innerHTML:设置或获取元素里的文本内容(包含html标记,解析css样式)-->
		    <p id="txt"></p>
    <div id="box"></div>
  <!--  <input type="button"  value="给p标签添加文本内容"/>-->
     <!--  下面的button标签等价于上面的普通按钮 -->
    <button id="txt-btn">给p标签添加文本内容</button>
    <script>
    	var btn1=document.getElementById('txt-btn');
    	btn1.onclick=function(){
    		 var p= document.getElementById('txt');
    		 //设置p元素里的文本内容
    	 p.innerHTML="<h2 style='color:red'>我是p里面的h2</h2>";
    	 //获取p元素里的文本内容
    	 var content=p.innerHTML;
    	   console.log(content);
    	}

    </script>
	</body>
</html>

js--Dom(三)内容节点操作+属性节点操作-LMLPHP

innerText


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--innerText:设置或获取元素里的文本内容(不包含html标记,不解析css样式)-->
		    <p id="txt"></p>
    <div id="box"></div>
  <!--  <input type="button"  value="给p标签添加文本内容"/>-->
     <!--  下面的button标签等价于上面的普通按钮 -->
    <button id="txt-btn">给p标签添加文本内容</button>
    <script>
    	var btn1=document.getElementById('txt-btn');
    	btn1.onclick=function(){
    		 var p= document.getElementById('txt');
    		 //设置p元素里的文本内容
    	 p.innerText="<h2 style='color:red'>我是p里面的h2</h2>";
    	 //获取p元素里的文本内容
    	 var content=p.innerText;
    	   console.log(content);
    	}

    </script>
	</body>
</html>

js--Dom(三)内容节点操作+属性节点操作-LMLPHP

把元素当成对象来操作属性节点


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!-- 操作属性节点的方式1:把元素当成对象来操作它的属性,
		两种写法,分别是元素.属性名或元素["属性名"]
		特殊: 如果要操作的属性名是class,那么要把class改成className-->

		<img  id="pic" src="../img/adv_1.jpg" alt="无法显示图片">
		<p class="pt"  id="pp">我是一个段落</p>
		<input type="button" id="btn1" value="改变图片" />
			<input type="button" id="btn2" value="获取p元素的class属性" />
		<script>
			var btn1=document.getElementById('btn1');
			btn1.onclick=function(){
				 //设置img元素的src属性
				 document.getElementById('pic'). src="../img/tly.jpg";
				 //获取img元素的src属性
				var src=   document.getElementById('pic'). src;
				console.log(src);
			}
				var btn2=document.getElementById('btn2');
			btn2.onclick=function(){
				//获取元素的class属性
			var pclass=document.getElementById('pp').className;
			console.log(pclass);
			}
		</script>
	</body>
</html>

js--Dom(三)内容节点操作+属性节点操作-LMLPHP

通过元素的属性相关方法来操作属性节点


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!-- 操作属性节点的方式2:通过元素的属性相关的方法来操作属性节点
			方法1:getAttribute(属性名):获取一个属性的值,参数是属性名
			方法2:setAttribute(属性名,属性的值):设置一个属性的值
			方法3:removeAttribute(属性名):移除某个属性
		-->

		<img  id="pic" src="../img/adv_1.jpg" alt="无法显示图片">
		<p class="pt"  id="pp">我是一个段落</p>
		<input type="button" id="btn1" value="获取图片的src属性" />
			<input type="button" id="btn2" value="设置图片的src属性" />
				<input type="button" id="btn3" value="移除图片的src属性" />
		<script>
			var btn1=document.getElementById('btn1');
			btn1.onclick=function(){

				 //获取img元素的src属性
				var src=   document.getElementById('pic'). getAttribute("src");
				console.log(src);
			}
				var btn2=document.getElementById('btn2');
			btn2.onclick=function(){
				 //设置img元素的src属性
		     var img=document.getElementById('pic');
		     img.setAttribute("src","../img/tly.jpg");
			}
				var btn2=document.getElementById('btn3');
			btn3.onclick=function(){
				 //移除img元素的src属性
		     var img=document.getElementById('pic')
		      img.removeAttribute("src");
			}
		</script>
	</body>
</html>

js--Dom(三)内容节点操作+属性节点操作-LMLPHP

02-05 14:02