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. GCC for Win32开发环境介绍

    http://blog.csdn.net/VisionCat/article/details/711693 http://blog.csdn.net/VisionCat/article/categor ...

  2. Apache 403 error, (13)Permission denied: access to / denied问题

    Apache 配置Alias 后,无法访问 CentOS系统 检查了一圈httpd.conf和目录权限,均没有发现问题. 最后,看了这篇文章,发现是因为系统启动了SELINUX导致的. http:// ...

  3. 在myeclipse2014使用git上传github

    简介 首先在myeclipse中安装github客户端插件,这里就不说了,跟安装svn客户端插件一样的步骤 1.选中要push到github的工程右键team->share project-&g ...

  4. (45) Manifest文件

    这个是一模块主要描述和设置的文件,下面进行讲解一下{    'name': "A Module",    'version': '1.0',    'depends': ['bas ...

  5. tensorflow版的bvlc模型

    研究相关的图片分类,偶然看到bvlc模型,但是没有tensorflow版本的,所以将caffe版本的改成了tensorflow的: 关于模型这个图: 下面贴出通用模板: from __future__ ...

  6. SQL 子查询，连接查询复习

    use lianxi0720 go --创建部门表 create table bumen ( bcode int primary key,--部门编号 bname ), --部门名称 bceo ), ...

  7. Java—数组

    1 声明数组变量   dataType[] arrayRefVar; 2 实例数组         double[] myArray; 3 创建数组         arrayRefVar =new ...

  8. VS2010开发AutoCAD 2012 .net应用程序调试时断点不起作用

    VS2010+ AutoCAD 2012开发调试过程中,发现普通的Class里面的断点是可以跟踪到的,可能是创建自定义的Form做界面是,Form1.cs中的代码断点却不管用.原因在于AutoCAD的 ...

  9. Apache、NGINX支持中文URL

    Apache(32位):安装环境:CentOS 5.6 + Apache 2.2.15安装结果:安装后支持“中文图片.文件名”链接直接打开以下为安装过程:1.下载安装包 wget ftp://ftp. ...

  10. PDF 补丁丁 0.5.0.2078 测试版发布：不用打字，也能加书签

    新增功能: 在书签编辑器加书签,不再需要自己输文本. 书签编辑器的阅读界面增加了识别文本字符的功能,可使用该功能在添加书签时识别文本. 右键点击文本内容,可插入书签(对于扫描版的文档,在激活识别引擎后 ...