javascript学习笔记DOM(1)

时间:2021-06-01 14:37:58

DOM

 

DOM我个人理解就是网页中的每一个元素,如果把每一个节点和子节点以树形结构表示出来很像家里的族谱图,如下图。

javascript学习笔记DOM(1)javascript学习笔记DOM(1)

 

所以DOM关系也可以看成是描述网页元素关系的“族谱图”,只要知道其中一个人就可以找到任何一个跟他有直接或者间接关系的人,(例如:你想找你的二大爷,可以找到你爸爸的二哥就可以了,要是指向的是隔壁老王的二哥就出事儿了。)。DOM关系也是一样,知道其中一个就可以根据他们的关系来找到任何一个DOM元素。

 

获取元素的方法有哪些?

1、document.getElementById("Id");

  在整个文档中通过元素的ID获取一个元素

  1)如果ID重复了,我们只能获取第一个
  2)IE6 7下不区分ID的大小写
  3)IE6 7下会把表单元素的name属性当作ID来用
  4)可以直接用ID当作对象来用 (内嵌式),项目中不建议这样使用,有很严重的兼容性。

 

2、document.getElementsByTagName("标签");

  根据标签获取元素可以指定上下文。上下文是要查找的范围。

  在整个文档上通过元素的标签名称获取一组元素 返回值是一个类数组元素。保存所有根据标签查询出来的元素。

 

3、document.getElementsByName("元素的name属性");

  在整个文档上通过元素的name属性获取一组元素(类数组)  

  在IE浏览器下只对表单元素起作用

 

4、document.body  

  获取整个body

 

5、document.documentElement

  获取整个HTML

 

6、document.getElementsByClassName("类样式名")

  在整个文档上通过元素的样式名称获取一组元素(类数组)
  这个不兼容IE6~8

 

样式选择器(不兼容IE6~8 移动端经常使用)

7、document.querySelector("");

  可以根据id class 标签等选择DOM元素。

  获取一个 如果有多个也只获取第一个


8、document.querySelectorAll("");

  获取多个(类数组)