JavaScriptDOM编程解析

dom

dom：document objective model（文本对象模型）

d: 文档 html文档或 xml文档 o: 对象 document对象的属性和方法 m: 模型 dom 是针对xml(html)的基于树的api。 dom 树：节点（node）的层次。 dom 把一个文档表示为一颗家谱树（父，子，兄弟） dom 定义了node的接口以及许多种节点类型来表示xml节点的多个方面

节点及类型

元素节点 属性节点：元素的属性，可以直接通过属性的方式来操作。 文本节点：是元素节点的子节点

例子

<script type="text/javascript"> //当整个html文档完全加载成功后触发window.onload事件。 window.onload = function () { //获取所有的button节点，并获得第一个元素 var btn = document.getelementsbytagname("button")[0]; //为btn的onclick事件赋值:当点击button时，执行函数体 btn.onclick = function(){ //弹出helloworld alert("hello world"); } } </script>clickme

获取元素节点

document.getelementbyid: 根据id属性获取对应的单个节点（该方法为document对象的方法）

document.getelementsbytagname: 根据标签名获取指定节点集合（该方法为node接口的方法，即任何一个节点都有这个方法）

document.getelementsbyname: 根据节点的name属性获取符合的节点集合（若html元素自身没有定义name属性，则用该方法对有些无效，所以使用时需谨慎）

子例

<script type="text/javascript"> //获取指定元素的节点. window.onload = function(){ //1.获取id为bj的那个节点. var bjnode = document.getelementbyid("bj"); alert(bjnode); //2.获取所有li节点. //使用标签名获取指定节点集合 var linodes = document.getelementsbytagname("li"); alert(linodes.length); var citynode = document.getelementbyid("city"); var citylinodes = citynode.getelementsbytagname("li"); alert(citylinodes.length); //3.根据html 文档元素的 name属性名来过去指定的节点的集合. var gendernodes = document.getelementsbyname("gender"); alert(gendernodes.length); } </script>

你喜欢那个城市？

• 北京
• 上海
• 东京
• 首尔

你喜欢哪款单击游戏？

• 红警
• 实况
• *飞车
• 魔兽

gender: male female