[Java教程]DOM操作的5个基本方法
0 2016-03-25 21:00:07
JavaScript的 DOM操作,主要是对DOM这三个字母中D、O、M的操作。D代表的是document(文档),即我们可以使用javascript对文档进行操作,O代表的是object(对象),对象包括用户自定义对象,内建对象和宿主对象,这里不再赘述,M代表的是model(模型),今天我们主要讲的就是model。
model,就是把一份文档表示成一份树状结构的模型(ps:实在找不到图了,我觉得树状结构还是很容易脑补出来的吧!),这个树状结构由无数个节点组成,因为这个性质,所以,我们可以把整个文档叫做节点树。这些节点组成了整个文档,就像盖房子一样,文档是一座房子,那么节点就是砖头。(这样的比喻还有很多)
节点主要分为三种:元素节点、文本节点,和属性节点。
hello world!
上面这段html代码当中p就是元素节点,hello world!就是文本节点,color=”red”就是属性节点;
今天介绍的5种方法中,有三种就是获取元素的方法
1.document.getElementById(id);
学习日记网络就像一个有神奇魔力的水晶球,从中我们可以找到无穷无尽的乐趣。
上面这段代码就是使用该方法获取了文档当中id为“text” 的独一无二的元素,该方法返回的是对应此独一无二元素的一个对象,我们用typeof操作符验证结果。上一段代码的输出结果为object。
2.document.getElementsByTagName(tag);
tag表示的是元素的名字,该方法返回的是一个数组,数组中包含了文档中所有此元素对应的对象。
把上面的一段代码代替第一段代码当中的javascript部分,para就是这个文档当中所有p元素的集合,既然是集合,那他必定有length属性,代表数组的长度。输出结果为两个object。
3.getElementsByClassName(class);
HTML5 DOM中新增的方法,获取文档中所有class属性为class的值。
但是,只有较新的浏览器才支持这个方法,所以程序员需要用已经有的方法来实现这个方法function getElementsByClassName(node,classname){ //如果浏览器支持,使用现有方法 if(node.getElementsByClassName){ return node.getElementsByClassName(classname); }else{ var results=new Array(); var elems = node.getElementsByTagName("*"); for(var i=0;i
下面举一个例子: