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