1.元素节点的style属性

HTML文档中每个元素节点都有一个style属性，style属性包含着元素的样式，查询这个这个属性将会返回一个对象，节点对应的样式都存放在这个style属性里。

一个Demo:可以弹出弹窗，返回标签应用的CSS样式

exampl

An example of a paragraph

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部分

Hold the page

第一段写点什么呢？

我来讲一段故事：从前有座山，山里一个庙...

别走啊！！！最精彩的还在后面，旁边有一座尼姑庵...

还有！！！还有！！！

你听我讲，慢慢听我讲，这个故事很精彩

你可以评论我的文章，我告诉你后续故事，真的很精彩，不骗你。

（2）js代码部分

首先封装一个styleHeaderSiblings函数，获取所有的h1标签，然后调用nextSibling方法获取下一个节点，但是nextSibling方法返回的是所有节点而不只是元素节点，包括h1中的text了文本，所以就需要函数getNextElement来进行判断，直到获取到下一个元素节点为止返回，然后执行改变样式的操作

styleHeaderSiblings函数：

//需求：改变h1标签紧跟着后面节点元素的样式，首先要封装一个函数，获取所有的h1元素    //headers[i].nextSibling获取的是
标签后面的文本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

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.完整源代码