javascript中DOM核心基础知识大乱炖

最后更新于:2018-03-24 14:03:44

DOM简介:Document Object Model.

DOM学术名是“文档对象模型”,这个高端上档次的名称并不适合我们理解,简单来说,个人认为DOM其实是描述整个HTML页面中关系节点的图谱。在《JavaScript DOM编程艺术第二版》中,有对DOM的详细解释,有兴趣的可以去看下,这里我简单总结一下。

DOM中的“D”代表Document是文档的缩写,创建一个网页并把它加载到浏览器中,DOM就会产生,它把你编写的网页文档转化为一个文档对象。

DOM中的“O”代表Object是对象的缩写。在整个JavaScript中,对象分为用户定义对象,内建对象和宿主对象。

1.用户自定义对象:由程序员创建的对象

2.内建对象:JavaScript中自带的对象,如:Date,Array...

3.宿主对象:由浏览器推荐的对象。

DOM中的“M”代表Model是模型的缩写,关于模型比较抽象,把它理解为族谱或者文档树可能会更加容易接受,如在网页中有这样一份文档:


<!-- 一个DOM结构示例: --> 
</head>
<body>
<h2>新闻列表</h2>
<p>最新消息:</p>
<ul class="newList">
    <li>人大代表:房产税应从夫妻名下第三四套房开征</li>
    <li>中央发话了:这三类人“钱袋子”要鼓 有你吗?</li>
    <li>中国游客仍旧挤爆乐天免税店?环球:与实情不符</li>
</ul>
</body>
</html>

它的模型可以用如下图片来表示:

节点树

其实族谱和文档树还可以用专业的术语来描述,我们把上图的关系网称之为“节点树”,关于节点,我们需要知道,在DOM常用的三种节点。

DOM常用的三种节点:

  • 元素节点:element node

针对上面一份文档,元素节点就是其中的<body><p><ul><li>...元素标签

  • 文本节点:text node

文本节点就是其中的文字,也可以简单理解为显示在网页上的文字内容。

  • 属性节点:attribute node

<ul>标签有一个类名class的属性,我们称之为属性节点。

在DOM中,我们常用的获取属性的方法:

">1.document.getElementById("Id"):通过元素的ID获取元素对象。">
  1. 如果页面的ID重复了,将获取第一个元素
  2. 在IE6,7中,会把表单元素的name属性值当做ID来使用。
  3. 在IE6,7中,不区分ID的大小写。
  4. 获取范围(上下文)只能是document.

PS:不要让表单元素的name和其他元素的id重复,不要用ID的大小写来区分不同的元素。

">2.document.getElementsByTagName("标签名"):通过标签名来获取一组元素(类数组)。">

PS:document:上下文(context),我们自己可以限制获取的范围。

3.context.getElementsByName:通过元素name属性值来的值获取一组元素(类数组)。

PS:在IE浏览器下,只能对表单元素有作用。

不兼容,在ie6,7,8中会报错">4.context.getElementsByClassName("类名"):不兼容,在ie6,7,8中会报错不兼容,在ie6,7,8中会报错">
5.document.documentElement:获取html元素

document.body:获取body元素

//获取当前屏幕宽度
var curWidth = document.documentElement.clientWidth||document.body.clientWidth:

//获取当前屏幕高度
var curHeight = document.documentElement.clientHeight||document.body.clientHeight:
6.移动端常用的获取元素的方法。

1).document.querySelector();获取一个

2).document.querySelectorAll():获取多个、类数组集合

几个需要掌握的节点关系:

  • childNodes:获取元素所有的子节点。
  • children:获取元素的所有元素子节点。
  • parentNode:获取父亲节点。
  • previousSibling:获取上一个哥哥节点。
  • nextSibling:获取下一个弟弟节点。
  • firstChild:获取所有子节点中的第一个。
  • lastChild:获取所有子节点中的最后一个。

DOM中基本节点操作总结:

DOM中对属性的基本操作:

  • 获取属性:getAttribute
  • 设置属性:setAttribute
  • 删除属性:removeAttribute

结束语:

JavaScript是由EMCAScript(核心)DOM(文档对象模型)BOM(浏览器对象模型)组成的,学好DOM对于JavaScript的学习至关重要,一些简单的基本操作在哪里都可以学到,关键是要勤加练习,有自己的独特的想法,做到举一反三才算真正的掌握。

由网上找来一张大神总结的图,能够帮助我们更好的学习和了解DOM。

DOM学习图

备注:图片引用互联网,如有侵犯您的权利请联系博主,会在第一时间删除。