DOM的认识以及一些节点的应用
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的认识以及一些节点的应用的更多相关文章
- Java 用自带dom解析器遍历叶子节点内容
一.XML文件config.xml,内容如下: <?xml version="1.0" encoding="UTF-8" standalone=" ...
- DOM的概念及子节点类型
前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...
- DOM的概念及子节点类型【转】
前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组 ...
- -_-#【减少 DOM 访问】“离线”更新节点,再将它们添加到树中
Minimize DOM Access javascript 之 DOM 优化 <!DOCTYPE html> <html> <head> <meta cha ...
- DOM基础之“寻找”子节点
今天学习了JS中的DOM的内容,虽然小菜的理解不深,但希望能够记录下来,慢慢一点一点的进步,有更深的理解了,再回来补充. 首先,关于DOM的概念: 1.概念:DOM = document(文档)Obj ...
- JavaScript DOM操作之查找元素节点
概要: 编程接口 可通过 JavaScript 对 HTML DOM 进行访问. 所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性. 方法是您能够执行的动作(比如添加或修改元素). ...
- DOM(二) 判断节点包含关系
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JavaScript的DOM编程--04--获取元素节点的子节点
获取元素节点的子节点(**只有元素节点才有子节点!!) 1). childNodes 属性获取全部的子节点, 但该方法不实用. 因为如果要获取指定的节点 的指定子节点的集合, 可以直接调用元素节点的 ...
- JavaScript的DOM编程--03--读写属性节点
读写属性节点: 1)可以直接通过 cityNode.id 这样的方式来获取和设置属性节点的值 2)通过元素节点的 getAttributeNode 方法来获取属性节点, 然后在通过 nodeValue ...
随机推荐
- HDU 1055 - Color a Tree
一棵树,结点树为n,根结点为r.每个结点都有一个权值ci,开始时间为0,每染色一个结点需要耗时1,每个结点的染色代价为ci*ti(ti为当前的时间),每个结点只有在父结点已经被染色的条件下才能被染色. ...
- Perfect Squares
Perfect Squares Total Accepted: 18854 Total Submissions: 63048 Difficulty: Medium Given a positive i ...
- [Effective Modern C++] Item 1. Understand template type deduction - 了解模板类型推断
条款一 了解模板类型推断 基本情况 首先定义函数模板和函数调用的形式如下,在编译期间,编译器推断T和ParamType的类型,两者基本不相同,因为ParamType常常包含const.引用等修饰符 t ...
- C++输入和输出
本文转载:blog.csdn.net/zhanghaotian2011/article/details/8868577博客 输入和输出并不是C++语言中的正式组成成分。C和C++本身都没有为输入和输出 ...
- PHP截取汉字乱码问题解决方法mb_substr函数的应用
首先 1.确保你的Windows/system32下有php_mbstring.dll这个文件,没有就从你Php安装目录extensions里拷入Windows/system32里面. 2.在wind ...
- LinearLayout遇到的问题——利用LinearLayout做横向滑动冲突
问题:当我添加两个TextView的时候,然后滑动,发现只生成了一个TextView. 就是 <?xml version="1.0" encoding="utf-8 ...
- Linux下源码编译安装rpy2
R(又称R语言)是一款开源的跨平台的数值统计和数值图形化展现工具.rpy2是Python直接调用R的第三方库,它可以实现使用python读取R的对象.调用R的方法以及Python与R数据结构转换等.这 ...
- java学习:AWT组件和事件处理的笔记(1)--文本框上的ActionEvent事件
学习处理事件时,必须很好的掌握事件源,监视器,处理事件的接口 1.事件源 能够产生java认可事件的对象都可称为事件源,也就是说事件源必须是对象 2.监视器 监 ...
- PHP简单socket编程
今天再看一点邮件发送的功能,所以了解一下socket变成,看到了一篇不错的文章,转发过来做个笔记吧. 原文链接:http://www.cnblogs.com/thinksasa/archive/201 ...
- Android学习笔记——Activity的启动和创建
http://www.cnblogs.com/bastard/archive/2012/04/07/2436262.html Android Activity学习笔记——Activity的启动和创建 ...