1.DOM方法

常用

getElementById()  返回带有指定 ID 的元素

getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）

getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表

getAttribute() 返回指定的属性值

setAttribute() 把指定属性设置或修改为指定的值

－－－

appendChild() 把新的子节点添加到指定节点

removeChild() 删除子节点

一些常用的 HTML DOM 属性：

  • innerHTML - 节点（元素）的文本值
  • parentNode - 节点（元素）的父节点
  • childNodes - 节点（元素）的子节点
  • attributes - 节点（元素）的属性节点

一些 DOM 对象方法中的常用方法：

方法 描述
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。

属性是节点（HTML 元素）的值，您能够获取或设置。

获取元素内容的最简单方法是使用 innerHTML 属性。

innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

innerHTML 属性可用于获取或改变任意 HTML 元素，包括 <html> 和 <body>。

nodeName 属性

nodeName 属性规定节点的名称。

  • nodeName 是只读的
  • 元素节点的 nodeName 与标签名相同
  • 属性节点的 nodeName 与属性名相同
  • 文本节点的 nodeName 始终是 #text
  • 文档节点的 nodeName 始终是 #document

注释：nodeName 始终包含 HTML 元素的大写字母标签名。

nodeValue 属性

nodeValue 属性规定节点的值。

  • 元素节点的 nodeValue 是 undefined 或 null
  • 文本节点的 nodeValue 是文本本身
  • 属性节点的 nodeValue 是属性值

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

访问 HTML 元素（节点）

访问 HTML 元素等同于访问节点

以不同的方式来访问 HTML 元素：

  • 通过使用 getElementById() 方法
  • 通过使用 getElementsByTagName() 方法
  • 通过使用 getElementsByClassName() 方法

修改 HTML 元素

修改 HTML DOM 意味着许多不同的方面：

  • 改变 HTML 内容
  • 改变 CSS 样式
  • 改变 HTML 属性
  • 创建新的 HTML 元素
  • 删除已有的 HTML 元素
  • 改变事件（处理程序）

使用事件

HTML DOM 允许您在事件发生时执行代码。

当 HTML 元素”有事情发生“时，浏览器就会生成事件：

  • 在元素上点击
  • 加载页面
  • 改变输入字段

HTML 事件的例子：

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图片已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当 HTML 表单被提交时
  • 当用户触发按键时
 
 

HTML DOM的更多相关文章

  1. 关于DOM的操作以及性能优化问题-重绘重排

     写在前面: 大家都知道DOM的操作很昂贵. 然后贵在什么地方呢? 一.访问DOM元素 二.修改DOM引起的重绘重排 一.访问DOM 像书上的比喻:把DOM和JavaScript(这里指ECMScri ...

  2. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  3. 页面嵌入dom与被嵌入iframe的攻防

    1.情景一:自己的页面被引入(嵌入)至别人的页面iframe中 if(window.self != window.top){ //url是自己页面的url window.top.location.hr ...

  4. 通俗易懂的来讲讲DOM

    DOM是所有前端开发每天打交道的东西,但是随着jQuery等库的出现,大大简化了DOM操作,导致大家慢慢的“遗忘”了它的本来面貌.不过,要想深入学习前端知识,对DOM的了解是不可或缺的,所以本文力图系 ...

  5. HTML DOM 介绍

    本篇主要介绍DOM内容.DOM 节点.节点属性以及获取HTML元素的方法. 目录 1. 介绍 DOM:介绍DOM,以及对DOM分类和功能的说明. 2. DOM 节点:介绍DOM节点分类和节点层次. 3 ...

  6. HTML DOM 对象

    本篇主要介绍HTML DOM 对象:Document.Element.Attr.Event等4个对象. 目录 1. Document 对象:表示文档树的根节点,大部分属性和方法都是对元素进行操作. 2 ...

  7. 重撸js_2_基础dom操作

    1.node 方法 返回 含义 nodeName String 获取节点名称 nodeType Number 获取节点类型 nodeValue String 节点的值(注意:文本也是节点) 2.inn ...

  8. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  9. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  10. jQuery学习之路（2）-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

随机推荐

  1. 【High-Speed and Accurate Laser Scan Matching Using Classified Features】

    所谓的"分类特征",就是把特征分成 1. 旋转特征:用直线表示 2. 平移特征,用撕裂点和临界点表示 最大的创新点 应该就是下面的分组吧 匹配的时候,用RANSAC 或者动态规划, ...

  2. 在linux上部署web环境

    1.升级python到2.7版本(通过源码包重新安装一个2.7版本的python):wget https://www.python.org/ftp/python/2.7.9/Python-2.7.9. ...

  3. 前台jquery+ajax+json传值，后台处理完后返回json字符串，如何取里面的属性值？（不用springmvc注解）

    一.取属性值 前台页面: function select(id){ alert("hfdfhdfh"+id); $.ajax({ url:"selectByid.jsp& ...

  4. VMware8.0虚拟机中安装Ubuntu12.04使用NAT设置连接网络

    之前一直尝试使用“桥接”的方法,但是一打开虚拟机,本机windows就断网.最后不得不换种方法,还好尝试了很多遍终于使用NAT设置成功的联网了. 说明:本机windows连接的是无线网. 1.检查自己 ...

  5. Takeown--夺取文件or文件夹所有权

    强制将当前目录下的所有文件及文件夹.子文件夹下的所有者更改为管理员组(administrators)命令:takeown /f * /a /r /d y 将所有d:\documents目录下的文件.子 ...

  6. 懒加载实现的分页&&网站footer自适应

    最近在做手机端,发现下拉刷新和上拉加载的jq控件很少而且自我感觉不好用,比如iscroll之类-- 然后自己写了个懒加载的,也很简单,最基础的代码[不喜勿喷,但蛮实用的] wap手机端懒加载分页: 用 ...

  7. 时间的处理 --java

    得到当天时间 SimpleDateFormat format = new SimpleDateFormat( "yyyy-MM-dd" ); String todayData = ...

  8. GitHub的使用之新建与更新代码

    一.新建仓储:注册GitHub后你就会有0.3G的免费空间,不过只能创建公开项目,这也满足代码分享的目的,我最喜欢的倒是它的代码展示方式,可以直接浏览你的代码,代码是经过高亮.添加行号处理过的,十分漂 ...

  9. Adb refused a command 解决方法

    原文:How To Fix Android Error Adb Refused A Command 地址:http://downloadfixit.com/android-error-adb-refu ...

  10. makefile 学习网站

    http://blog.csdn.net/ruglcc/article/details/7814546/#t30