<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM基础</title> </head> <body> <div id="box" title="标题" class="pox" style="color:red;" >测试DIV</div> <input type="checkbox" name="test" value="单选框" checked="checked"/> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body> <script> window.onload=function(){ var box=document.getElementById("box"); // alert(box.tagName); //获取元素节点的标签名 // alert(box.innerHTML) //获取元素节点的文本 // alert(box.id); //获取这个元素节点属性的值 // alert(box.title); //获取title属性的值 // alert(box.style); //获取style属性的值 // alert(box.style.color); //获取style属性对象中color属性的值 // alert(box.className); //获取class属性的值 // box.innerHTML="玩转<strong>JS</strong>" //赋值,可以解析HTML var li=document.getElementsByTagName("li"); //传递一个标签名即可 // alert(li); //返回一个li数组的集合, HTMLCollection // alert(li.length) ; //返回li数组的数量 // alert(li[0]); //返回li的节点对象, HTMLLIElement ,[0]表示第一个节点对象 // alert(li[0].tagName); // LI // alert(li[0].innerHTML); //返回li的节点对象的文本值 , 1 var input=document.getElementsByName("test")[0]; // alert(input); //获取 input 元素 // alert(input.checked); //获取 input 元素的 checked 值 // alert(input.value); //获取 input 元素的 value 值 // box.setAttribute('align','center'); //设置属性和值 // box.removeAttribute('align'); //删除居中属性 } /* 节点分为三类: 1.元素节点:其实就是标签,<div></div>; 2.文本节点:其实就是标签内的纯文本, "测试DIV"; 3.属性节点:其实就是标签的属性 , id="box" ; DOM操作只会等HTML文档加载完毕之后,才可以获取 1:把<script>标签移到文档下面; 2:用onload事件,加载HTML文档; window.οnlοad=function(){ //这里用来存放当网页所有内容加载完毕之后,再执行的代码 }; 查找元素: 1.getElmentById();参数传递一个元素的id值,获取到该元素节点 元素节点属性: alert(document.getElementById("box").tagName; //获取元素节点的标签名 alert(document.getElementById("box").innerHTML); //获取元素节点的文本,(包含标签) HTML属性: alert(document.getElementById("box").tagName); //获取元素节点的标签名 alert(document.getElementById("box").innerHTML) //获取元素节点的文本 alert(document.getElementById("box").id); //获取这个元素节点属性的值 alertdocument.getElementById("box").title); //获取title属性的值 alert(document.getElementById("box").style); //获取style属性的值 alert(document.getElementById("box").style.color); //获取style属性对象中color属性的值 alert(document.getElementById("box").className); //获取class属性的值 以上是HTML属性的直接调用; 赋值,可以解析HTML: document.getElementById("box").innerHTML="玩转<strong>JS</strong>" 2. document.getElementsByTagName(*)方法;将返回一个对象数组,这个数组保存着所有相同元素名的节点列表 alert(document.getElementsByTagName("li")); //返回一个li数组的集合, HTMLCollection alert(document.getElementsByTagName("li").length) ; //返回li数组的数量 alert(ldocument.getElementsByTagName("li")[0]); //返回li的节点对象, HTMLLIElement,[0]表示第一个节点对象 alert(document.getElementsByTagName("li")[0].innerHTML); //返回li的节点对象的文本值 , 1 3.getElementsByName()方法可以获取相同名称(name)的元素,返回一个对象数组 HTMLCollection(NodeList)。 document.getElementsByName('tes') //获取 input 元素 document.getElementsByName('tes')[0].value //获取 input 元素的 value 值 document.getElementsByName('tes')[0].checked //获取 input 元素的 checked 值 4.getAttribute()方法 将获取元素中某个属性的值。它和直接使用.属性获取属性值的方法有 一定区别。 document.getElementById('box').getAttribute('id'); //获取元素的 id 值 document.getElementById('box').id; //获取元素的 id 值 PS:HTML 通用属性 style 和 onclick,IE7 更低的版本 style 返回一个对象,onclick 返回 一个函数式。虽然 IE8 已经修复这个 bug,但为了更好的兼容,开发人员只有尽可能避免使 用 getAttribute()访问 HTML 属性了,或者碰到特殊的属性获取做特殊的兼容处理。 5.setAttribute()方法 setAttribute()方法将设置元素中某个属性和值。 它需要接受两个参数:属性名和值。如果属性本身已存在,那么就会被覆盖。 document.getElementById('box').setAttribute('align','center'); //设置属性和值 6.removeAttribute()方法 removeAttribute()可以移除 HTML 属性。 document.getElementById('box').removeAttribute('style'); //移除属性 */ </script> </html>