前言：前面是纯总结，后面实现了一个用DOM改变样式的Demo。
－－－－－－－－－－－－－－－－－－－开始－－－－－－－－－－－－－－－－－－－－－－－－－
1.元素节点的style属性
HTML文档中每个元素节点都有一个style属性，style属性包含着元素的样式，查询这个这个属性将会返回一个对象，节点对应的样式都存放在这个style属性里。
一个Demo:可以弹出弹窗，返回标签应用的CSS样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>exampl</title>
<script>
window.onload = function(){
var para = document.getElementById("example");
alert("The font family is "+ para.style.fontFamily);
alert("The color is "+ para.style.color);
alert("The font fontsize is "+ para.style.fontSize); //浏览器默认的字体大小无法识别出来
}
</script>
</head>
<body>
<p id="example" style="color:grey;font-family:'Arial',sans-serif;">
An example of a paragraph
</p>
</body>
</html>2.style的弊端
style属性只能返回内嵌样式，只有把CSS style样式插入到标记里，才可以用DOM style属性去查询那些信息。
3.一个Demo：根据元素在节点树里的位置来设置样式
Demo说明：作者首先给出了一段HTML，有两个<h1>标签，每一个<h1>标签后面跟着几个<p>标签，然后用DOM改变每个<h1>标签后面紧跟着的<p>标签的样式。在我看了这个Demo之后感觉作者多此一举，在<p>标签上添加class或者id属性用CSS不是更简单吗？但是后面作者给出了理由：如果文档需要定期编辑更新，那么添加class属性很快就会成为负担（这个负担也不小吧。。。），anyway，看代码吧。
（1）HTML部分
<h1>Hold the page</h1>
<p>第一段写点什么呢？</p>
<p>我来讲一段故事：从前有座山，山里一个庙...</p>
<p>别走啊！！！最精彩的还在后面，旁边有一座尼姑庵...</p>
<h1>还有！！！还有！！！</h1>
<p>你听我讲，慢慢听我讲，这个故事很精彩</p>
<p>你可以评论我的文章，我告诉你后续故事，真的很精彩，不骗你。</p>（2）js代码部分
首先封装一个styleHeaderSiblings函数，获取所有的h1标签，然后调用nextSibling方法获取下一个节点，但是nextSibling方法返回的是所有节点而不只是元素节点，包括h1中的text了文本，所以就需要函数getNextElement来进行判断，直到获取到下一个元素节点为止返回，然后执行改变样式的操作
styleHeaderSiblings函数：
//需求：改变h1标签紧跟着后面节点元素<p>的样式，首先要封装一个函数，获取所有的h1元素
//headers[i].nextSibling获取的是<h1>标签后面的文本text，用getNextElement函数进行判断
//如果headers[i].nextSibling是类型为1的节点元素，就返回并且改变样式
//如果不是就接着执行getNextElement函数（递归函数思想）
function styleHeaderSiblings(){
if(!document.getElementsByTagName){
return false;
}
var headers = document.getElementsByTagName("h1");
var elem;
for(var i = 0; i<headers.length; i++){
elem = getNextElement(headers[i].nextSibling);
elem.style.fontWeight = "bold";
elem.style.fontSize = "20px";
}
}getNextElement函数：唯一能让人兴奋的地方就是这里用了递归吧～～～
function getNextElement(node){
if(node.nodeType == 1){
return node;
}
if(node.nextSibling){
return getNextElement(node.nextSibling);
}
return null;
}在页面加载完成后调用styleHeaderSiblings函数，所以要封装一个addLoadEvent函数
function addLoadEvent(func){
//把现有的window.onload存入变量oldonload
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}最后调用页面加载完成时执行addLoadEvent(styleHeaderSiblings)
4.效果对比，略无聊～～～
应用之前
应用之后
5.完整源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>exampl</title>
</head>
<body>
<h1>Hold the page</h1>
<p>第一段写点什么呢？</p>
<p>我来讲一段故事：从前有座山，山里一个庙...</p>
<p>别走啊！！！最精彩的还在后面，旁边有一座尼姑庵...</p>
<h1>还有！！！还有！！！</h1>
<p>你听我讲，慢慢听我讲，这个故事很精彩</p>
<p>你可以评论我的文章，我告诉你后续故事，真的很精彩，不骗你。</p>
<!--js代码-->
<script>
//需求：改变h1标签紧跟着后面节点元素<p>的样式，首先要封装一个函数，获取所有的h1元素
//headers[i].nextSibling获取的是<h1>标签后面的文本text，用getNextElement函数进行判断
//如果headers[i].nextSibling是类型为1的节点元素，就返回并且改变样式
//如果不是就接着执行getNextElement函数（递归函数思想）
function styleHeaderSiblings(){
if(!document.getElementsByTagName){
return false;
}
var headers = document.getElementsByTagName("h1");
var elem;
for(var i = 0; i<headers.length; i++){
elem = getNextElement(headers[i].nextSibling);
elem.style.fontWeight = "bold";
elem.style.fontSize = "20px";
}
}
function getNextElement(node){
if(node.nodeType == 1){
return node;
}
if(node.nextSibling){
return getNextElement(node.nextSibling);
}
return null;
}
function addLoadEvent(func){
//把现有的window.onload存入变量oldonload
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(styleHeaderSiblings);
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。