节点类型:元素节点/属性节点/文本节点
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>根据标签名返回符合条件的数组
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>根据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>