【web前端(三十五)】javascript_文档对象模型中查找元素的API（BOM对象与DOM的混用）及在标签内添加文档的操作

本文链接：https://blog.csdn.net/LED_of_Java/article/details/99328514

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>文档对象模型中查找元素的API（BOM对象与DOM的混用）及在标签内添加文档的操作</title>
		<style>
			.aaa {
				border: 6px solid #000000;
			}
		</style>
	</head>

	<body>
		<!--
			在浏览器模型里头，每一个标签都被封装成一个独立的对象。
			浏览器对象模型的属性就直接拿来用就行，文档对象模型的属性，
			可以通过、
			console.log(img.attributes.length);
			console.log(img.attributes["src"]);
			img.attributes["src"].value = "../imges/timg.gif";
			与
			var img = document.getElementById("abc");
			console.log(img.nodeName);
			img.src = "../imges/2.gif";
			的象可替代性来应用。
		-->

		<!--应用样式：class="xxx"-->
		<img class="aaa" src="../imges/1.gif" id="abc" height="300" />

		<!--段落块-->
		<div id="ttt">Hello</div>

		<script type="application/javascript">
			
			/**
			 * 根据id访问节点
			 */


			/* 注意标签的id属性值原则上是不允许重复的，所以取到的是一个元素对象*/

			//所有DOM模型里头都有的形式
			var img = document.getElementById("abc"); //根据id访问节点
			console.log(img.nodeName);
			img.src = "../imges/2.gif";




			/**
			 * 据标签名访问元素
			 * /
			/*注意下面根据标签名访问元素得到的是个集合*/
			img = document.getElementsByTagName("img")[0]; //根据标签名找标签
			//此时，img已经是集合了。
			img.src = "../imges/3.gif";




			/**
			 * 根据class样式类属性得到标签集合
			 * */
			//document.getElementsByClassName不是标准标签，
			//相比上面两种来说，不常用。
			img = document.getElementsByClassName("aaa")[0];
			img.src = "../imges/4.gif";




			/**
			 * 获取标签内容
			 */
			var d = document.getElementById("ttt");
			console.log(d.textContent);


			/**文档对象模型的修改文本添加或追加子元素的方式**/
			//d.textContent="那好，我把内容修改了</b>";

			/*因为d.textContent会将修饰标签<b>转义，
			    所以得要在此处创建b元素。*/
			//var b=document.createElement("b");
			/*再在新标签里添加文本*/
			//b.textContent="你好！我把内容修改了！";

			/*我们也可以在追加之前，
			    可以将原来的d.textContent置空。*/
			//d.textCountent="";
			//d.appendChild(b);


			/**浏览器对象模型的访问方式**/
			console.log(d.innerHTML);
			d.innerHTML = "<b>你好！我把内容删了！</b>";
			//d.innerText和d.textContent类似
			d.innerText = "<b>你好！我把内容删了！</b>";
			/*若要在浏览器里显示"<b>"则我们就得要写实体引用,
			  这里"&lt;"代表左尖括号，"&gt;"代表右尖括号。*/
			d.innerHTML = "&lt;b&gt;你好！我把内容删了！&lt;/b&gt;";
		</script>>
	</body>

</html>