认识DOM

文档对象模型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>

认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构(节点树)。的更多相关文章

  1. 文本对象模型(Document Object Model)

    本文内容: 1. 概述 2. DOM中的节点类型 3. DOM节点的选取 4. 存取元素属性 5.DOM元素的增删 6.小结 ★ 概述 文本对象模型(DOM)是一个能够让程序和脚本动态访问和更新文档内 ...

  2. XML DOM (Document Object Model) 定义了访问和操作 XML 文档的标准方法。

    XML DOM DOM 把 XML 文档视为一种树结构.通过这个 DOM 树,可以访问所有的元素.可以修改它们的内容(文本以及属性),而且可以创建新的元素.元素,以及它们的文本和属性,均被视为节点. ...

  3. javascript之DOM(Document Object Model) 文档对象模型

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  4. JAVA读取XML,JAVA读取XML文档,JAVA解析XML文档,JAVA与XML,XML文档解析(Document Object Model, DOM)

    使用Document Object Model, DOM解析XML文档 也可参考我的新浪博客:http://blog.sina.com.cn/s/blog_43ac5543010190w3.html ...

  5. DOM 是什么,Document Object Model,文档对像模型

    #为什么会想起来写这个 在写dynaTrace Ajax的时候,写到这个是个前端性能测试工具,这个工具能记录请求时间,前端页面渲染时间,DOM方法执行时间,以及JavaScript代码解析和执行时间. ...

  6. 文档对象模型DOM通俗讲解

    转自:http://www.jb51.net/article/42671.htm 在开始之前先说一点,DOM是非常容易理解的,但是大家说的太官方,让人很是难于理解,我们就用非常简单的语言翻译一遍.加深 ...

  7. 文档对象模型DOM

    文档对象模型 DOM 1 DOM概述 1.1 什么是DOM 文档对象模型 Document Object Model 提供给用户操作document obj 的标准接口 文档对象模型 是表示和操作 H ...

  8. JavaScript编程:文档对象模型DOM

    5.文档对象模型DOM JS里的DOM和XML里的DOM不同,但是解析方式是一样的. document.getElementByID("id")根据ID获得元素节点. 创建和操作节 ...

  9. JavaScript的文档对象模型DOM

    小伙伴们之前我们讲过很多JavaScript的很多知识点,可以点击回顾一下: <JavaScript大厦之JS运算符>: <JavaScript工作原理:内存管理 + 如何处理4个常 ...

随机推荐

  1. jquery操作html元素之(删除元素)

    删除元素/内容 如需删除元素和内容,一般可使用以下两个 jQuery 方法: remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素 jQuery remove( ...

  2. spark集群进入 bin 下面目录./spark-shell 出现Unable to load native-hadoop library for your platform... using builtin-java classes where applicable

    spark集群启动的时候可以正常,进入 ./spark-shell 就会出现如下错误 配置文件:spark-env.sh export JAVA_HOME=/usr/java/jdk1.7.0_51e ...

  3. prettier包升级后vue项目运行报错

    今天用vue-cli新建vue项目的时候,发现项目怎么都跑不起来. 最后通过与以前项目作比较,发现prettier这个依赖的版本从原来的1.12.0升级成了1.13.1.我也不太清楚为什么升级后项目跑 ...

  4. 用python, PIL在图像上添加文字(可以控制,调节为水印等)

    最近想在图像上,添加想要的文字,首先想到的是matplotlib,但是这个更加倾向于画图(柱状图,折线图之类) opencv这个库肯定也行,但是为了和我现有程序连接在一起,我选择了PIL 其中字体的设 ...

  5. .NET Core 3.0之深入源码理解Startup的注册及运行

    原文:.NET Core 3.0之深入源码理解Startup的注册及运行   写在前面 开发.NET Core应用,直接映入眼帘的就是Startup类和Program类,它们是.NET Core应用程 ...

  6. Ajax.BeginForm 在 Chrome下的问题

    项目背景:MVC4 代码: @using (Ajax.BeginForm("Index", "GoingMeter", new AjaxOptions { On ...

  7. go 简介与包

    简介 Go语言是一种新的语言,一种并发的.带垃圾回收的.快速编译的语言.它具有以下特点: 1.它可以在一台计算机上用几秒钟的时间编译一个大型的Go程序. 2.Go语言为软件构造提供了一种模型,它使依赖 ...

  8. 三角形的实现和盒模型、层模型、浮动模型、定位、权重、margin问题

    相邻的border会平分所占的区域,出现一个斜线, .my_triangle{ width: 10px; height: 10px; background-color: blue; border-wi ...

  9. error while loading shared libraries: lib*.so: cannot open shared object file: No such file or directory

    动态库的搜索路径搜索的先后顺序是: 1.编译目标代码时指定的动态库搜索路径; 2.环境变量LD_LIBRARY_PATH指定的动态库搜索路径: 比如export LD_LIBRARY_PATH=/us ...

  10. WPF 新突破

    刘琦告诉我  需要改变哪个属性哪个属性就需要实现InotifyPropertyChanged 董秀伟告诉我  界面改变会立即传输到属性上,并不需要实现InotifyPropertyChanged,只有 ...