HTML DOM (文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 模型被构造为对象的树。

HTML DOM 树

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常,通过 JavaScript,您需要操作 HTML 元素。

为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:

  • 通过 id 找到 HTML 元素
  • 通过标签名找到 HTML 元素
  • 通过类名找到 HTML 元素

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。

实例

本例查找 id="intro" 元素:

var x=document.getElementById("intro");

如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。

如果未找到该元素,则 x 将包含 null。

通过标签名查找 HTML 元素

实例

本例查找 id="main" 的元素,然后查找 "main" 中的所有 <p> 元素:

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

提示:通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

未完成。。。。

DOM的认识以及一些节点的应用的更多相关文章

  1. Java 用自带dom解析器遍历叶子节点内容

    一.XML文件config.xml,内容如下: <?xml version="1.0" encoding="UTF-8" standalone=" ...

  2. DOM的概念及子节点类型

    前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...

  3. DOM的概念及子节点类型【转】

    前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...

  4. -_-#【减少 DOM 访问】“离线”更新节点,再将它们添加到树中

    Minimize DOM Access javascript 之 DOM 优化 <!DOCTYPE html> <html> <head> <meta cha ...

  5. DOM基础之“寻找”子节点

    今天学习了JS中的DOM的内容,虽然小菜的理解不深,但希望能够记录下来,慢慢一点一点的进步,有更深的理解了,再回来补充. 首先,关于DOM的概念: 1.概念:DOM = document(文档)Obj ...

  6. JavaScript DOM操作之查找元素节点

    概要: 编程接口 可通过 JavaScript 对 HTML DOM 进行访问. 所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性. 方法是您能够执行的动作(比如添加或修改元素). ...

  7. DOM(二) 判断节点包含关系

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. JavaScript的DOM编程--04--获取元素节点的子节点

    获取元素节点的子节点(**只有元素节点才有子节点!!) 1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 的指定子节点的集合, 可以直接调用元素节点的 ...

  9. JavaScript的DOM编程--03--读写属性节点

    读写属性节点: 1)可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值 2)通过元素节点的 getAttributeNode 方法来获取属性节点, 然后在通过 nodeValue ...

随机推荐

  1. Python和C#基本算法实现对比

    最近在学习python,很多入门的例子又写了一遍,基本上是C#和Python都写了一遍,对比发现语言真是相通啊,只是语法不同而已. python开发也是用的VS,很好用,特别是代码段运行,选中一段py ...

  2. Sql server中根据object的定义查找object

    SELECT OBJECT_NAME(object_id) FROM sys.sql_modulesWHERE definition LIKE '%keyword to search%' 或者 SEL ...

  3. 关于JS变量和作用域

    ECMAScript 变量:1.基本类型值(简单数据段) 2.引用类型值(可能由过个值构成的对象) → 保存在内存中的对象 动态属性: 只能给引用型值动态添加新属性,以便将来使用. 复制变量值 : 基 ...

  4. Android Fragment(碎片)的使用

    简介 在Android中Fragment为一种可以嵌入活动中的UI片段.能让程序更加合理地利用大屏幕的空间. 使用方法 1.我们首先新建的一个onefragment.xml文件. <?xml v ...

  5. 微信OPENID授权方法

    今天搞了下微信授权, 总结了下微信的授权规则与步骤 先来几个关键字 Openid  微信ip(属于唯一指向公众号的id) redirect_uri  授权回调地址 State 回调地址带参数 Appi ...

  6. 让Scrapy的Spider更通用

    1,引言 <Scrapy的架构初探>一文所讲的Spider是整个架构中最定制化的一个部件,Spider负责把网页内容提取出来,而不同数据采集目标的内容结构不一样,几乎需要为每一类网页都做定 ...

  7. TypeError: 'QueryDict' object is not callable

    id = int(request.POST('id')) Error message: TypeError: 'QueryDict' object is not callable Error rese ...

  8. Leetcode算法刷题:第14题 Longest Common Prefix

    Longest Common Prefix 题目 给予一个列表,元素为字符串,写一个程序找出最长公共前缀 解题思路 先比较两个字符串,如果第一个字符不一样,则返回空值,比较完成后,用这个公共字符串和下 ...

  9. Git学习01 --git add, git commit , git log ,git status, git reset --hard, head

    Git官方提供的快速入门教程:https://try.github.io/levels/1/challenges/1 特点:Git极其强大的分支管理:分布式版本 集中式版本控制系统,版本库是集中存放在 ...

  10. Linux文件解压缩详解

    tar命令 我们知道在Windows下最常见的压缩文件就只有两种,一是,zip,另一个是.rar.可是Linux就不同了,它有.gz..tar.gz.tgz.bz2..Z..tar等众多的压缩文件名, ...