1、CSS： 继承是CSS技术中的一项强大功能，节点树上的各个元素将继承其父元素的样式属性。
2、3种获取DOM元素方法：getElementById返回一个对象，getElementsByTagName、getElementsByClassName返回对象数组
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Shopping list</title> </head> <body> <h1>What to buy</h1> <p title="a gentle reminder">Don't forget to buy this stuff.</p> <ul id="purchases"> <li>A tin of beans</li> <li class="sale">Cheese</li> <li class="sale important">Milk</li> </ul> <script type="text/javascript"> console.log(document.getElementById("purchases")); console.log("--------------------------------------"); console.log(document.getElementsByTagName("li"));//是标签名称，不是name属性 console.log("--------------------------------------"); console.log(document.getElementsByTagName("*")); console.log("--------------------------------------"); // console.log(document.getElementsByTagName("*i"));//不是这样写 console.log("--------------------------------------"); //下面是先根据Id找到元素对象，然后在该元素对象内找li标签 var shopping=document.getElementById("purchases"); console.log(shopping.getElementsByTagName("li")); console.log("--------------------------------------"); console.log(document.getElementsByClassName("sale")); console.log("--------------------------------------"); //获取同时含有多个类的元素，类之间用空格隔开 console.log(document.getElementsByClassName("important sale")); console.log("--------------------------------------"); //在特定区域根据类名找li标签 var shopping=document.getElementById("purchases"); console.log(shopping.getElementsByClassName("sale")); </script> </body> </html>
3、getElementsByClassName是HTML5中的，低版本浏览器不支持，下面提供兼容性方法
function getElementsByClassName(node,classname){ if(node.getElementsByClassName){ //使用现有方法 return node.getElementsByClassName(classname); }else{ var results=new Array(); var elems=node.getElementsByTagName("*"); for(var i=0;i<elems.length;i++){ if(elems[i].className.indexOf(classname)!=-1){ results[results.length]=elems[i]; } } return results; } }
4、使用DOM提供的nodeValue属性获取或修改值
假如获取和修改上面页面p标签内容显示
首先获取到p元素节点var pElementNode=document.getElementsByTagName("p")[0]，因为只有一个p标签，所以取第一个
再获取p标签的文本节点var pTextNode=pElementNode.childNodes[0]或var pTextNode=pElementNode.firstChild，因为p标签内只有一个文本节点（如下会有两个文本节点<p>第一个文本节点<br/>第二个文本节点</p>）
获取文本节点内容pTextNode.nodeValue;//Don't forget to buy this stuff.
修改文本节点内容pTextNode.nodeValue="新赋值ppppppp";