当前位置: 移动技术网 > IT编程>网页制作>CSS > JavaScriptDOM编程解析

JavaScriptDOM编程解析

2018年12月07日  | 移动技术网IT编程  | 我要评论

巴厘岛旅游报价,火柴雄兵,仙剑游戏音乐

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>

获取元素节点

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

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网