JavaScript操作DOM

由于HEML文档被浏览器节气后就是一颗DOM树，要改变HTML的结构，就要通过JS来操作DOM

始终要记住DOM时一个属性结构。操作一个DOM节点实际上就是这么几个操作：更新，遍历，添加，删除

//获取text的节点
var text=document.getElementById('text');
//获取text中的内部所有tr元素的节点
var text1=document.getElementById('text').getElementsTagName('tr')
//获取text中的所有class为text1的节点
var text2=document.getElementById('text').getElementsByClassName('text1')
//获取text下的所有字节点
var text3=text.Children;
//获取text节点下的第一个字节点
var text4=text.firstElementChild;
//获取text节点下的最后一个节点
var text=text.lastElementChild;

第二种方式

//通过querySelector获取id为q1的节点
var q1=document.querySelector('#q1');
//通过querySelectorAll获取q1节点内的符合条件的所有节点
var ps=q1.querySelectorAll('div.highlighted>p')

querySelectorAll()返回的是一个数组

更新DOM

哎，我们拿到了一个节点后，可以对它更新升级

更新的方式由二种

第一种innerHTML这个属性非常强大，不但可以修改一个DOM接待你的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树

<p id='id'></p>
<script>
//获取id节点更改节点数据，当然你也可以不修改直接获取
doucument.querySelector('#id').innerHTML="更改的数据"
</script>

 第二种方式修改innerText和textContent属性

<p id='id'></p>
<script>
//获取id节点更改节点数据，当然你也可以不修改直接获取
doucument.querySelector('#id').innerText="更改的数据"
doucument.querySelector('#id').textContent="更改的数据"
</script>

 插入DOM

我们获得了某个DOM节点，想在这个DOM节点内插入新的DOM，应该如何去做？

如果这个DOM节点时空的，例如<div></div>,那么，直接使innerHTML='<span>a</span>'就

可以修改DOM节点的内容

，相当于插入了新的DOM节点

如果这个节点不是空的，那么就不能这么做，因为innerHTML会直接替换掉原来的所有子节点

有两个办法可以插入新节点

第一种appendChild(把一个子节点插入到父节点的最后一个子节点)

//改变前的结构
<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

//把id为js添加到div中的最后一项
var js=document.getElementById('js');
var list=document.getElementById('list');
list.appendChild(js);

//改变后的结构
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="js">JavaScript</p>
</div>

//因为我们插入的js节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置

更多的时候我们会从零创建一个新的节点，然后插入到指定的位置

var js=document.getElementById('js');
//createElement创建一个新节点
var haskell=document.createElement('p');
//设置节点的一些属性
haskell.id='Haskell';
haskell.innerHTML='我是小明';
list.appendChild(haskell);

//插入后的结构就是这样的
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="haskell">Haskell</p>
</div>

这个时候大炮同学说话了：阿巴阿巴，它只能在body标签里插入节点吗

NO

var create=document.createElement('style');
//setArribute设置属性
create.setArribute('type','text/css');
d.innerHTML='p{color.red}';
document.getElementsByClassName('head')[0].appendChild(create)

这样就插入了一个样式节点

这个时候大炮同学又来阿巴阿巴了：那可不可以把节点插入到指定位置呀？

可以

insertBefore（两个参数第一个新节点，第二个是插入到那个节点之前）

var 
    list=document.getElementById('list');
    rey=document.getElementById('python');
    haskell=document.createElement('p');
    haskell.id='Haskell';
    haskell.innerHTML='Haskell';
//插入到这个父接口中的python的前面
list.insertBefore(haskell,rey);