文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

先来看看下面代码:

将HTML代码分解为DOM节点层次图:

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

看下面代码:

<a href="http://www.imooc.com">JavaScript DOM</a>

HTML文档可以说由节点构成的集合，DOM节点有:

1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

节点属性:

遍历节点树:

以上图ul为例，它的父级节点body,它的子节点3个li,它的兄弟结点h2、P。

DOM操作:

注意:前两个是document方法。

JavaScript--认识DOM的更多相关文章

  1. javascript --- javascript与DOM

    javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...

  2. JavaScript与DOM

    文档对象模型Document Object Model DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的API.Javascript和D ...

  3. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  4. JavaScript与DOM的关系

    JavaScript与浏览器的工作 1.浏览器获取并加载你的页面,从上至下解析它的内容. 遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码. 浏览器还会建立一个HTML页面的 ...

  5. JavaScript网站设计实践（四）编写about.html页面，利用JavaScript和DOM，选择性的显示和隐藏DIV元素

    一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...

  6. JavaScript学习笔记(2)——JavaScript和DOM的关系

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...

  7. JavaScript HTML DOM 元素(节点)

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...

  8. JavaScript HTML DOM EventListener

    JavaScript HTML DOM EventListener addEventListener() 方法 实例 点用户点击按钮时触发监听事件: document.getElementById(& ...

  9. JavaScript HTML DOM 事件

    JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...

  10. JavaScript HTML DOM - 改变CSS

    JavaScript HTML DOM - 改变CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法 ...

随机推荐

  1. LINUX-文件的权限 - 使用 "+" 设置权限，使用 "-" 用于取消

    ls -lh 显示权限 ls /tmp | pr -T5 -W$COLUMNS 将终端划分成5栏显示 chmod ugo+rwx directory1 设置目录的所有人(u).群组(g)以及其他人(o ...

  2. sectional data interpolation in Tecplot

    $!Varset |NumLoop|= $!Loop |NumLoop| $!Varset |num|=(|Loop|*+) $!RotateData ZoneList = [] Angle = |n ...

  3. C,LINUX,数据结构部分

    1604期 第1期测试(面试精选:C,LINUX,数据结构部分) 本试卷从考试酷examcoo网站导出,文件格式为mht,请用WORD/WPS打开,并另存为doc/docx格式后再使用 试卷编号:24 ...

  4. 威纶通 与 信捷XC\XD系列PLC 通讯

    第一次使用信捷XD系列PLC正式做个项目,用的触摸屏为威纶通的 MT6071iP (注意:下面内容同样适用于 信捷XC系列PLC ,除信捷XC与XD系列编程软件不一样,其余接线设置实测均一样 ) 目前 ...

  5. 关于git上传GitHub以及码云（gitee）

    如果你是gitee(码云),点击链接跳转 首先,你的有一个GitHub的账号(然后新建项目我就不说了) # Linux的方法 GitHub网站下的,点击settings下的emails,确认自己的邮箱 ...

  6. jQuery对象是怎么创建的

    一.jQuery源码 在jQuery中,$是jQuery的别名,执行“$()”就是执行“jQuery()”,执行“$()”返回的是一个jQuery对象,在源码中,它是这样定义的: ... var jQ ...

  7. The Balance POJ 2142 扩展欧几里得

    Description Ms. Iyo Kiffa-Australis has a balance and only two kinds of weights to measure a dose of ...

  8. project处理 InteropServices.COMException 异常

    project文件无法上传,在上传中的hangfire出现了这个异常 System.Runtime.InteropServices.COMException 这个是因为website的权限是IUser ...

  9. ubuntu 16.04网卡找不到eth0

    自15版本开始就不叫eth0.可以通过ifconfig进行查看: ifconfig -a 其中enp3s0才是网卡的名称,lo为环路. 参考: http://blog.csdn.net/christn ...

  10. Maven安装好后包下载的测试命令和配置变量的查看命令：mvn help:system

    mvn help:system 该命令会打印出所有的Java系统属性和环境变量,这些信息对我们日常的编程工作很有帮助.运行这条命令的目的是为了让Maven执行一个真正的任务.我们可以从命令行输出看到M ...