一、HTML DOM的作用

HTML DOM方法是我们可以在节点（html元素）上执行的动作。

HTML DOM属性是我们可以在节点（html元素）设置和修改的值。

编程接口：

可以通过JavaScript（以及其他编程语言）对HTML DOM进行访问。

所有HTML元素被定义为对象Object，而编程接口则是对象方法和对象属性，方法是可以执行的动作（如getElementById()），属性是能够获取或设置的值（比如节点的名称或内容）

二、HTML DOM对象-方法和属性

（一）常用的HTML DOM方法：

  • getElementById()  获取带有指定Id的节点（元素）
  • appendChild（node）插入新的子节点（元素）
  • removeChild（node）删除子节点（元素）

（二）、常用的HTML DOM属性

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

为了更好地理解对象、属性、方法这些定义可以将其引申到现实生活中的例子上来，比如说以人为例。

一个人可以理解为一个对象；

html dom方法是在节点上执行的动作。人的方法可能就是eat()、sleep()、work()等这些可以执行的动作。所有人都有这些方法，但会在不同的时间执行。

html dom属性指可以在节点设置和修改的值。一个人的属性可能就是年龄、性别、体重、身高、姓名等等。所有人都有这些属性，但是具体的值因人而异。

三、DOM方法（常用的）

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

四、实例

（一）、点击按钮改变页面的背景颜色（使用getElementById()方法）

<body id="bg">

<button onclick="document.getElementById('bg').style.backgroundColor='#fcc'">红色</button>

<button onclick="document.getElementById('bg').style.backgroundColor='#cfc'">绿色</button>

<button onclick="document.getElementById('bg').style.backgroundColor='#ccf'">蓝色</button>
</body>

显示效果：点击红色按钮时，页面背景变为红色；点击绿色按钮时，页面背景变为绿色；点击蓝色按钮时，页面背景变为蓝色；

设置body元素的ID为bg，通过getElementById(‘bg’)方法获取body元素的ID，然后再为其设置CSS样式（style）,背景颜色。其中涉及到了onclick单击事件属性

（二）、使用选色器改变页面背景颜色

<body id="bg">

<input type=color onmouseout="document.getElementById('bg').style.backgroundColor=this.value">

显示效果：选色器里面选择的颜色将会设置为页面背景颜色；

设置body元素的ID为bg，通过getElementById(‘bg’)方法获取body元素的ID，然后再为其设置CSS样式（style）,背景颜色为(this.value)。其中涉及到了onmouseout鼠标离开事件属性。

打开选色器后

选择颜色

（三）使用调色器改变页面背景颜色

<body id="bg">

红：0<input id="hong" type=range min=0 max=255 value=255 onchange="document.getElementById('bg').style.backgroundColor='rgb('+document.getElementById('hong').value+','+ document.getElementById('lv').value+','+document.getElementById('lan').value+')'">255

<hr>

绿：0<input id="lv" type=range min=0 max=255 value=255 onchange="document.getElementById('bg').style.backgroundColor='rgb('+document.getElementById('hong').value+','+ document.getElementById('lv').value+','+document.getElementById('lan').value+')'">255

<hr>

蓝：0<input id="lan" type=range min=0 max=255 value=255 onchange="document.getElementById('bg').style.backgroundColor='rgb('+document.getElementById('hong').value+','+ document.getElementById('lv').value+','+document.getElementById('lan').value+')'">255

实现效果：通过拖动颜色滑动条来调整页面背景颜色

设置body元素的ID为bg，通过getElementById(‘bg’)方法获取body元素的ID，然后再为其设置CSS样式（style）。type=range自定义滑动条。并定义滑动控件的最大值255、最小值0。使用rgb颜色

HTML DOM方法的更多相关文章

  1. DOM – (w3school)1.DOM 方法 + 2.DOM属性 + 3.DOM 元素

      1.DOM 方法   一些 DOM 对象方法 这里提供一些您将在本教程中学到的常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTa ...

  2. Java解析XMl文件之SAX和DOm方法

    如题,这两种方法的jar包都在jdk中,不需要下载. 先来说下目录结构: 首先建一个Peron类封装person.xml的属性:DomParseService和SaxParseService分别为两种 ...

  3. javascript插入before(),after()新DOM方法

    随着web的技术突飞猛进的发展.HTML5 ES6等新技术的发展,与此同时DOM等标准也在悄悄的进步,各大浏览器也在悄悄的发展适配新的属性和方法,今天我们来看看Javascript新的DOM的方法 二 ...

  4. 操作 html 的时候是使用 dom 方法还是字符串拼接？

    比如一个列表里面有很多个 li,要给他们加上数据.但多少个 li 是不确定的,由后台数据确定.这时候,就要动态生成 html 内容了. 那么,这个过程, 是使用 += 方法把标签.数据进行一个个的字符 ...

  5. Dom方法，解析XML文件

    Dom方法,解析XML文件的基本操作 package com.demo.xml.jaxp; import java.io.IOException; import javax.xml.parsers.D ...

  6. before(),after(),prepend(),append()等新DOM方法简介

    一.DOM API也在不断升级 web前端标准一直在不断升级,比方说,说了很多年的HTML5.CSS3,以及天天见的ES6. 然后,似乎就没有然后了.实际上,除了HTML5/CSS3/ES6+,关于D ...

  7. 【js常用DOM方法】

    介绍几个js DOM的常用方法 获取元素节点 getElementById  getElementsByTagName  getElementsByClassName 先写一个简单的网页做测试: /* ...

  8. 公司内部的一篇关于dom方法的分享

    第一部分 dom node类型 nodeType 属性 nodeType 属性返回节点的类型.nodeType 是只读的. 比较重要的节点类型有: 元素类型 NodeType 元素 1 属性 2 文本 ...

  9. HTML DOM 方法

    一.HMTL DOM对象 --方法和属性 1.1常用的方法. 1.getElementByld( id )方法 --获取带有指定id 的节点( 元素 ) 2.appendChild( node )方法 ...

随机推荐

  1. 学用 TStringGrid [6] - Options

    本例运行效果图: 一般修改 TStringGrid 的 Options 直接在设计时选一下 True 或 False 就行了; 代码中可以像下面操作:   StringGrid1.Options := ...

  2. Oracle 启用登录终端超时锁定功能

    远程连接oracle 会出现超时连接断开的问题,所以需要修改oracle配置. 修改超时时间10分钟 ALTER PROFILE DEFAULT LIMIT IDLE_TIME 10; 查询修改后的超 ...

  3. Java中的静态变量、静态方法、静态代码块

    转载自http://www.cnblogs.com/panjun-Donet/archive/2010/08/10/1796209.html (一)静态方法(1)在Java里,可以定义一个不需要创建对 ...

  4. CentOS7linux通过http配置共享自动创建yum源的shell脚本

    因工作需要用到,所以记录一下配置流程 环境介绍: 两台CentOS7系统 yum源服务主节点IP:192.168.1.78 从节点IP:192.168.1.79(79从78上获取yum源) 配置78节 ...

  5. shell脚本每隔几秒执行

    while true do cmd(shell 命令) sleep x(x为秒数) done ————————————————版权声明:本文为CSDN博主「这年头起名真难3232」的原创文章,遵循 C ...

  6. 任务调度之 Quartz

    任务调度的背景 在业务系统中有很多这样的场景: 账单日或者还款日上午 10 点,给每个信用卡客户发送账单通知,还款通知.如何判断客户的账单日.还款日,完成通知的发送? 银行业务系统,夜间要完成跑批的一 ...

  7. selenium 教程

    selenium 本身是一套web自动化测试工具,但其经常被用于爬虫,解决一些复杂爬虫的问题. selenium 用于爬虫时,相当于模拟人操作浏览器. 浏览器驱动 使用 selenium 需要先安装 ...

  8. go 关键字之 defer

    我是谁 defer - 顾名思义翻译过来叫 延迟, 所以我们通常称呼 defer func() 这样 defer 后面紧跟的函数为 延迟函数. 作者注: 不过从实际应用来讲, 延迟函数通常用来做一些函 ...

  9. 清理Windows图标缓存 | 懒人屋

    原文:清理Windows图标缓存 | 懒人屋 文章背景 这是一个抄袭的文章,原文在参考资料中 运行环境 操作系统:Windows 10 x64(1903) 清理脚本 @echo off rem 关闭W ...

  10. JS调用PageMethods

    http://www.cnblogs.com/Ren_Lei/archive/2010/07/14/1777413.html JS调用PageMethods 操作步骤: 1.新建一个WebApplic ...