Javascript(笔记28) - DOM基本操作 - Element节点的属性和方法
Element节点的一些属性
innerHMTL
能改变元素里的HTML内容，
HTML：
<div>
<span>123</span>
<strong>234</strong>
</div>
把 div 选出来：
var div = document.getElementsByTagName('div')[0];
查看一下这个 div 和 div 里的内容：
除了读取 HTML的内容，还能写入；
除了写入，还可以追加：
所以追加一点标签和样式自然也是可以的了：
看下HTML：
innerText
取文本内容。（以前版本的 firefox 里没有这个属性，他给了个 textContent ）
还是上面一段HTMl：
<div>
<span>123</span>
<strong>234</strong>
</div>
看控制台：
innerText 也是可读可写的，如果我们写入：
就是把以前的东西都覆盖了。
所以，使用的时候要小心，如果只是改文本的时候就很随意，如果HTMl里结构，比如有个 span ，再直接写入的话，就等于把结构也覆盖了。而写在 innerText 里的结构也会被当做文本处理；
Element 节点的一些方法
ele.setAttribute()
给当前元素设置行间属性；
HTML：
<div>
<p></p>
</div>
给他设置一个ID:
demo 如果是事先写好了，现在给 div 加上这个 class 后，样式就会发生改变；
在后的编码中，可以和事件配合动态的给 标签加上 class ，来跟用户交互；
示例：
给 div 下的子元素统一设置 "this-name" 属性，属性值为标签名；
HTML
<div>
<p></p>
<span></span>
<em></em>
</div>
JS里：
var div = document.getElementsByTagName('div')[0];
var child = div.children;
for(var i = 0; i< child.length ; i ++){
child[i].setAttribute('this-name',child[i].nodeName);
}
HTML结构：
ele.getAttribute()
从当前元素获取属性；
以上面这个示例为例：分别取出 div 里子元素的 this-name 值；
看控制台：
练习：
写一段 javascript 脚本，生成下面这段 DOM结构。
<div class="example">
<p class="slogan">hello world</p>
</div>
这个比较简单：
var div = document.createElement('div');
document.body.appendChild(div);
var p = document.createElement('p');
div.appendChild(p);
p.innerText = "hello world";
div.setAttribute('class','example');
p.className = "slogan";
HTML结构：
当然，如果你无耻的使用 innerHTML 手写 HTML的话，也行。
