你的位置:首页 > 软件开发 > Java > JavaScript学习笔记——DOM基础 2.1

JavaScript学习笔记——DOM基础 2.1

发布时间:2015-08-11 15:00:05
一、DOM1、DOM的基本概念DOM是Document Object Model的缩写,意思是文本对象模型,也就是说,如果没有Document,DOM也就无从谈起。我们可以把创建的网页当作是一个Document对象。JavaScript的对象可以分为三种类型:由用户自定义的对象, ...

JavaScript学习笔记——DOM基础 2.1

一、DOM

1、DOM的基本概念

DOM是Document Object Model的缩写,意思是文本对象模型,也就是说,如果没有Document,DOM也就无从谈起。我们可以把创建的网页当作是一个Document对象。

JavaScript的对象可以分为三种类型:由用户自定义的对象,由JavaScript本身提供的内建对象,以及由浏览器提供的宿主对象。

顺便提一下BOM(Browser Object Model)和WOM(Window Object Model),其实这两个说的是一种东西,但大家更习惯叫BOM,在学习JavaScript的初期,不需要花太多精力去研究BOM。

DOM中的M,代表了一种模型,一种特殊的树状结构,通过这个结构,我可以轻松的找到所需要的内容。

JavaScript学习笔记——DOM基础 2.1

2、DOM中的节点

根据上面的图例,我发现HTML文档中的标签、属性、文本都被当作节点状放在了树状图中。JavaScript中把标签称为元素节点,标签中的属性称为属性节点,标签内的文本称为文本节点,这些节点都是对象。

二、获取元素

JavaScript允许我们可以通过元素ID,标签名和类名来获取元素节点,如果了解CSS,那么这一点会很好理解。

1、getElementById方法

它的语法是document.getElementById(id),返回的是与这个id相对应的对象,注意它只有一个参数。对下面这个例子来说,它返回的是div这个元素节点。

<!doctype html><html><head><meta charset="utf-8"><title>筱雨生 - 博客园</title></head><body><h1>筱雨生</h1><p>時光飛逝,莫讓網絡蹉跎了歲月</p><div id="myBlog"><ul><li>JavaScript</li><li>HTML</li><li>CSS</li><li>我的随笔</li></ul></div><script>var myBlog = document.getElementById("myBlog");alert(typeof myBlog); //object</script></body></html>

原标题:JavaScript学习笔记——DOM基础 2.1

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。