一、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. 自己整理JS数据的基本知识

    自己整理JS数据的基本知识 javascript部分: 1.引入的方式包括外链和内联. 2.JS的数据类型有哪些? 原始类型和引用类型; undefined类型,值为undefined; null类型 ...

  2. linux使用ltrace和strace跟踪程序执行过程

    yum install strace yum install ltrace 1.strace  ping -c 1 www.baidu.com 2.ltrace  ping -c 1 www.baid ...

  3. python调用java代码 java虚拟机（jvm）

    1.新建com文件夹,在里面新建 fibnq.java package com; public class fibnq { public fibnq(){} public int fb(int n){ ...

  4. docker--docker 网络管理

    9 docker 网络管理 9.1 默认网络 1.查看docker网络: docker network ls Docker中默认的三种网络分别为bridge.host和none,其中名为bridge的 ...

  5. kafka消费者脚本无法启动问题

    console-consumer can't rebalance after 4 retries 解决方案:kafka0.9版本换成1.0版本 究竟是怎么回事我也不知道

  6. P1182 数列分段`Section II` 二分

    https://www.luogu.org/problemnew/show/P1182 做了这个题才知道二分的强大 这个题可以假设我们有n个果子 m个容器 要能把果子全装进去 那么容器最小可以是多小 ...

  7. Java数据结构之算法时间度

    1.度量一个程序(算法)执行时间的两种方法 1)事后统计的方法 这种方法可行, 但是有两个问题:一是要想对设计的算法的运行性能进行评测,需要实际运行该程序:二是所得时间的统计量依赖于计算机的硬件.软件 ...

  8. 认识 JVM

    1 什么是JVM?  JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范.比如 对Class文件类型,运行时数据,帧栈 ,指令集等的规范 ,Hot ...

  9. [Codeforces 1214A]Optimal Currency Exchange(贪心)

    [Codeforces 1214A]Optimal Currency Exchange(贪心) 题面 题面较长,略 分析 这个A题稍微有点思维难度,比赛的时候被孙了一下 贪心的思路是,我们换面值越小的 ...

  10. application详解

    Application对象是HttpApplicationState类的一个实例,Application状态是整个应用程序全局的.本文主要详细介绍Application对象的用法. 一.全局应用程序类 ...