一、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. LeetCode.874-走路机器人模拟(Walking Robot Simulation)

    这是悦乐书的第335次更新,第360篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第205题(顺位题号是874).网格上的机器人从点(0,0)开始并朝北.机器人可以接收三 ...

  2. Go语言入门篇-命令 与 语法

    一.命令基础 1. go run : 用于运行命令源码文件(如:go run helloworld.go) 只能接受一个命令源码文件以及若干个库源码文件作为文件参数 其内部操作步骤: (1)先编译源码 ...

  3. 使用screen管理后台程序

    我们常需要SSH 或者telent 远程登录到Linux 服务器,经常运行一些需要很长时间才能完成的任务,在此期间不能关掉窗口或者断开连接,否则这个任务就会被杀掉,一切半途而废了.这时,我们可以用sc ...

  4. SOAP详解(转)

    1. SOAP简介 1.1应用背景 对于应用程序开发来说,使程序之间进行因特网通信是很重要的.目前的应用程序通过使用远程过程调用(RPC)在诸如 DCOM 与 CORBA 等对象之间进行通信,但是 H ...

  5. 2019 我的世界多了一个 Python

    大一时学过 C语言,大三时用 C 控制单片机,之后就没有别的和编程的交集了. 大约十天前下定决心学 Python,不开玩笑,版本我选 3. 其实我也不是 100% 的零基础,因为一方面,我学过 C:另 ...

  6. PhoneGap学习网址

    官网:http://app-framework-software.intel.com/ 下载地址:http://download.csdn.net/download/haozq2012/7635951

  7. 获取kafka最新offset-java

    之前笔者曾经写过通过scala的方式获取kafka最新的offset 但是大多数的情况我们需要使用java的方式进行获取最新offset scala的方式可以参考: http://www.cnblog ...

  8. django项目学习之QQ登录

    最近在用django框架写一个商城项目(前后端分离),里面用到的一些技术其他项目也可以借鉴,于是就想写一些博客记录,以防自己忘记,今天先写一个关于登录接口中引入QQ登录接口的流程. 关于QQ登录接口的 ...

  9. Python 入门之 闭包

    Python 入门之 闭包 1.闭包 (1)在嵌套函数内使用(非本层变量)和非全局变量就是闭包 (2)_ closure _ 判断是不是闭包 def func(): a = 1 def foo(): ...

  10. 计算机系统结构总结_Cache Optimization

    Textbook: <计算机组成与设计——硬件/软件接口>  HI <计算机体系结构——量化研究方法>       QR Ch4. Cache Optimization 本章要 ...