【web前端(三十四)】javascript_DOM（文档对象模型）中的树形结构

 

<head>
		<meta charset="UTF-8">
		<title>文档对象模型的树形结构</title>
	</head>

	<body>
		<!--
        	操作动态效果
        -->

		<!--这里只写宽度，主要是为了自适应，防止图片变形-->
		<img src="../imges/timg.gif" width="200" />

		<script type="text/javascript">
			//文档对象模型树形结构不推荐

			//文档对象模型
			var t = document.documentElement; //根节点html
			console.log(t.nodeName);
			console.log(t.nodeType);
			//取子元素节点的集合
			//js的集合用数组去取
			console.log(t.childNodes[0].nodeName);

			//示例(文档对象模型的修改方式)
			//html和head之间的文本js不算，所以要注意索引
			var img = document.documentElement.childNodes[2].childNodes[1];
			console.log(img.nodeName);

			//属性集合
			console.log(img.attributes.length);
			//这里我们要注意，用数组取值。
			//是行不通的，只能拿键来取。
			console.log(img.attributes["src"]);
			img.attributes["src"].value = "../imges/timg.gif"; //文档对象模型访问属性的方式
			//			img.src="../imges/timg.gif";//浏览器模型访问属性的方式
			//文档对象模型在区文本的时候比计较方便
			//浏览器对象模型在添加、删除、和修改文本的时候比较方便。
		</script>
	</body>

</html>