由于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);