JavaScript之DOM_动力节点Java学院整理

　　

由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM。
　　始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作:

　　
    　　<李>更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容,李 　　<李>遍历:遍历该DOM节点下的子节点,以便进行进一步操作,李 　　<李>添加:在该DOM节点下新增一个子节点,相当于动态增加了一个HTML节点;李 　　<李>删除:将该节点从HTML中删除,相当于删掉了该DOM节点的内容以及它包含的所有子节点。 　　
　　

在操作一个DOM节点前,我们需要通过各种方式先拿到这个DOM节点。最常用的方法是<代码> . getelementbyid() 和<代码> document.getElementsByTagName()> document.getElementsByClassName() 。

　　

由于ID在HTML文档中是唯一的,所以<代码> . getelementbyid() 可以直接定位唯一的一个DOM节点。

　　

<代码> document.getElementsByTagName() 和<代码> document.getElementsByClassName() 总是返回一组DOM节点。要精确地选择DOM,可以先定位父节点,再从父节点开始选择,以缩小范围。
　　

　　

例如:
　　

　　 　　//返回ID为“测试”的节点: 　　var测试=. getelementbyid(测试);//先定位ID为“测试表”的节点,再返回其内部所有tr节点: 　　var trs=. getelementbyid(“测试表”).getElementsByTagName (tr);//先定位ID为“test-div”的节点,再返回其内部所有类包含红色的节点: 　　var红色=. getelementbyid (test-div) .getElementsByClassName(红色);//获取节点测试下的所有直属子节点: 　　var cs=test.children;//获取节点测试下第一个,最后一个子节点: 　　首先var=test.firstElementChild; 　　var=test.lastElementChild; 　　 　　之前 　　 　　

第二种方法是使用<代码> querySelector() 和<代码> querySelectorAll()> 　　

　　 　　//通过querySelector获取ID为q1的节点: 　　var q1=document.querySelector (# q1的);//通过querySelectorAll获取q1节点内的符合条件的所有节点: 　　var ps=q1.querySelectorAll (div。强调了在 p '); 　　 　　

注意:低版本的IE<8不支持<代码> querySelector 和<代码> querySelectorAll .IE8仅有限支持。
　　

　　

严格地讲,我们这里的DOM节点是指<代码>元素> 节点> 节点> 元素,<代码>评论> CDATA_SECTION> 类型,但是,绝大多数时候我们只关心<代码>元素> 节点> 节点忽略即可。根节点文档<代码> 已经自动绑定为全局变量文档<代码> 。
　　

　　

<>强练习
　　

　　

如下的HTML结构:
　　

　　

JavaScript
　　Java
　　Python
　　Ruby
　　斯威夫特
　　计划
　　Haskell

　　 　　 　　& lt; !——HTML结构——比; 　　& lt; div id=皌est-div”比; 　　& lt; div类=" c - r "比; 　　& lt; p id=坝行Я住弊４荍avaScript

　　& lt; p> Java

　　& lt;/div> 　　& lt; div class=" c - r c-green”比; 　　& lt; p> Python

　　& lt; p> Ruby

　　& lt; p> Swift

　　& lt;/div> 　　& lt; div类=癱-green”比; 　　& lt; p> Scheme

　　& lt; p> Haskell

　　& lt;/div> 　　& lt;/div> 　　之前 　　 　　

请选择出指定条件的节点:
　　

　　 　　//选择& lt; p> JavaScript

: 　　var js=& # 63; & # 63; & # 63;;//选择& lt; p> Python

& lt; p> Ruby

& lt; p> Swift

: 　　var arr=& # 63; & # 63; & # 63;;//选择& lt; p> Haskell

: 　　var haskell=& # 63; & # 63; & # 63;; 　　

JavaScript之DOM_动力节点Java学院整理