通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。

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");

javascript (十四) dom的更多相关文章

  1. 轻松学习JavaScript十四:JavaScript的RegExp对象(正則表達式)

    一RegExp对象概述 RegExp对象表示正則表達式,RegExp是正則表達式的缩写.它是对字符串运行模式匹配的强大工具. RegExp 对象用于规定在文本中检索的内容. 当您检索某个文本时.能够使 ...

  2. jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解

    本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html)               ;在每个匹配元素的外层添加一层DOM元素   ...

  3. JavaScript高级程序设计:第十四章

    第十四章 一.表单的基础知识 在HTML中,表单是由<form>元素来表示的,而在javascript中,表单对应的则是HTMLFormElement类型.HTMLFormElement继 ...

  4. 进击的Python【第十四章】:Web前端基础之Javascript

    进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...

  5. How Javascript works (Javascript工作原理) (十四) 解析,语法抽象树及最小化解析时间的 5 条小技巧

    个人总结:读完这篇文章需要15分钟,文章介绍了抽象语法树与js引擎解析这些语法树的过程,提到了懒解析——即转换为AST的过程中不直接进入函数体解析,当这个函数体需要执行的时候才进行相应转换.(因为有的 ...

  6. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史

    ---新内容开始--- 番外 大家周一好呀,又是元气满满的一个周一呀!感谢大家在周一这个着急改Bug的黄金时期,抽出时间来看我的博文哈哈哈,时间真快,已经到第十四篇博文了,也很顺顺(跌跌)利利 (撞撞 ...

  7. m_Orchestrate learning system---三十四、使用重定义了$的插件的时候最容易出现的问题是什么

    m_Orchestrate learning system---三十四.使用重定义了$的插件的时候最容易出现的问题是什么 一.总结 一句话总结:如下面这段代码,定义了$的值,还是会习惯性的把$当成jQ ...

  8. 如鹏网学习笔记(十四)ASP.NET

    Asp.net笔记 一.Socket类 进行网络编程的类,可以在两台计算机之间进行网络通讯 过程: 向服务器发送指令: GET /index.html HTTP/1.1 Host:127.0.0.1: ...

  9. 如鹏网学习笔记(十)DOM

    DOM笔记一.DOM简介 Document Object Model 文档对象模型 DOM的节点树模型:整个文档按照从大到小的节点划分,每一个内容都算作一个节点 DOM API 编程接口 可以用来操作 ...

随机推荐

  1. 走进C++程序世界-----函数相关(全局变量)

    全局变量 在函数外面定义的变量的作用域为全局,在程序的任何函数中都可用.与全局变量同名的局部变量不会修改全局变量的值,但会隐藏它.如果函数中有一个与全局变量同 名的局部变量时,则在函数中使用该名称时, ...

  2. 【模式识别】SVM核函数

    下面是几种经常使用的核函数表示: 线性核(Linear Kernel) 多项式核(Polynomial Kernel) 径向基核函数(Radial Basis Function) 也叫高斯核(Gaus ...

  3. B - 队列,推荐

    Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submit Status Desc ...

  4. c++实现查询天气预报

    原地址:http://blog.csdn.net/x_iya/article/details/8583015 用到的函数.API等 1.中央气象台API返回的JSON数据(http://m.weath ...

  5. 虚拟主机的配置、DNS重定向网站

    虚拟主机的配置:我用的是localhost本地测试站点+Apache环境 第一步:找到Apache安装目录下的httpd-vhosts.conf文件,然后启用这个文件,如何启用这个文件呢?当然是在ht ...

  6. POJ 3986 Math teacher's homework

    题目 给出\(n,m_1,m_2,...,m_n\),求\(x_1 xor x_2 xor ... xor x_n=k (0 \leq x_i \leq m_i)\)的解的数量.二进制位数小于\(32 ...

  7. Js脚本实现选项卡的实例

    效果演示: 具体代码: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http:/ ...

  8. 基于Qt的FreeType字体轮廓解析

    一.本文目的 以前的文档中.详细的介绍了FreeType开源字体引擎库的基础知识.基本用法.但并未详细的阐明在TurboCG中.是如何解析出一个文字的轮廓的,本文集中阐述.怎么样使用FreeType开 ...

  9. ajaxSubmit提交文件表单不执行success

    先描述一下我遇到的问题,系统里所有的表单都用ajaxSubmit来提交,成功回调success函数,普通表单都是没有问题的,但是有文件上传的表单就不行了,不会回调success,经验证会回调compl ...

  10. 一步一步重写 CodeIgniter 框架 (3) —— 用面向对象重构代码

    前面两篇文章为了重点突出 CodeIgniter 框架的原理,程序的结构很乱,有很多全局变量,在这一课中我们采用面向对象的方法对原先代码进行重构. 到目前为止,程序主要完成的就是 URL 分析,并根据 ...