一、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. windows下简单安装postgres

    目前版本是PostgreSQL 9.6,它经过以下平台认证: 32位Windows Windows 7,8和10 Windows 2008 Server 64位Windows Windows 7,8和 ...

  2. JavaScript —— 用法 输出

    用法 必须在<script>标签内 可以在<body>和<head>部分中 不限数量 <script> ... </script> 即可,不 ...

  3. 安装docker-下载加速、失败、成功安装

    前提:已装VMware虚拟机和Centos系统(具体安装包和过程可以百度) 先看这里:非root身份登录系统需要在下面的命令前加“sudo ”(sudo:代表给权限,用root登录则不需要输入) 一. ...

  4. Python基础语法之列表 元组

    1 列表 列表由一系列按照特定顺序的元素组成,其中的元素可以使不同的数据类型,用[ ]来表示列表,用逗号来分割列表中的元素. 1.1 列表操作之切片 a = [1, 2, 3, 4, 5, 6, 7, ...

  5. 编译中出现的undefined reference to XXX

    主要是在链接时发现找不到某个函数的实现文件.可以查找是否在makefile里没有增加待编译的.c文件,或者静态库没有引用

  6. C++中构造函数的手动和自动调用方式

    1,对象的构造通过构造函数来完成,和类名相同且没有返回值,这个时候只有参   数一个特性,构造函数可以自定义参数,这个参数一般而言就是对类进行初始  化来使用的:带有参数的构造函数的意义在于可以使得每 ...

  7. 解决keil5中文注释乱码方法

    菜单上面的edit-->Configuration-->Editor-->Encoding 选择Chinese GB2312 点击OK即可解决 参考 解决keil和source in ...

  8. PHP 如何实现页面静态化

    页面静态化分为两种 一种伪静态,即url重写,一种纯静态化. 一.静态化的优点: 1有利于搜索引擎收录网站页面的信息:搜索引擎更喜欢静态的,更变于抓取,搜索引擎SEO排名会更容易提高. 2静态网页化网 ...

  9. sublime3故障收集emmet无法安装pyv8

    本文主要介绍Sublime Text如何开启debug模式,分析使用过程中一些常见错误情形的解决方法.情形一:Package Control:There are no packages availab ...

  10. tabcontrol动态生成选项卡，并且在选项卡中添加窗体

    http://blog.csdn.net/zx13525079024/article/details/6084733 今天在论坛上看到有人问到,如果在点击TRVEVIEW时动态生成tabcontrol ...