<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>