版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/twilight_karl/article/details/60965681
节点类型：元素节点/属性节点/文本节点
元素节点
getElementById(id);
PS:DOM操作必须等待HTML文档加载完毕才可以获取
<1> 把脚本移文档最后
<2> 用onload事件加载
// 当网页所有内容都加载完再执行
window.onload = function(){
var data = document.getElementById("lalala");
alert(data);
}; 属性节点
tagName 标签名
innerHTML 元素节点里的内容（文本）
id ID值(属性值，不是属性节点)
title title值
style 获取style属性对象
className 获取class属性值
属性中的值可以更改
<script>
window.onload = function(){
var data = document.getElementById("lalala");
alert("id:"+data.id); // id:lalala
alert("class:"+data.className); // class:head
alert("title:"+data.title); // title:标题
alert("style:"+data.style); // style:[object CSSStyleDeclaration]
alert("innerHTML:"+data.innerHTML); // innerHTML:啦啦啦
};
</script>
<div id="lalala" class="head" title="标题">啦啦啦</div> getElementsByTagName(“标签名”)
根据标签名返回符合条件的数组
data[0].HTML与data.item(0).innerHTML等效
<script>
window.onload = function(){
var data = document.getElementsByTagName("li");
alert(data[0].innerHTML); // 1
alert(data.item(0).innerHTML); // 1
};
</script>
<div id="lalala" class="head" title="标题">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div> getElementsByName(“name”);
根据name属性返回符合条件的数组
<script>
window.onload = function(){
var data = document.getElementsByName("input");
alert(data[1].size); // 20
};
</script>
<body>
<form>
<input type="text" name="input" size="10"/>
<input type="text" name="input" size="20"/>
</form>
</body> PS:div标签中没有name属性，ie无法获取
属性值的操作
1，getAttribute(“属性名”); 返回属性的值(对象/值)
2，setAttribute(“属性名”,”属性值”);
3，removeAttribute(“属性名”) 移除属性
window.onload = function(){
var data = document.getElementById("lalala");
data.setAttribute("style","background-color:skyblue;");
}
</script>
<div id="lalala" class="head" title="标题">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div> ![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)