HTML5节点操作，HTML节点元素常用的DOM操作

HTML5节点操作，HTML节点元素常用的DOM操作有哪些

OM结构

DOM 采用的是“树形结构”，用“树节点”的形式来表示页面中的每一个元素。我们先看下面的一个例子。

<html>
  <head>
    <title><title>
    <meta charset="utf-8" />
  </head>
	<body>
      <h1>C语言中文网</h1>
			<p>C语言中文网一个……</p>
			<p>C语言中文网成立于……</p>
	</body>
</html>

对于上面这个 HTML 文档，DOM 将其解析为图 1 所示的树形结构。

图 1：DOM 树

于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。

始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：

更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById()和document.getElementsByTagName()，以及CSS选择器document.getElementsByClassName()。

由于ID在HTML文档中是唯一的，所以document.getElementById()可以直接定位唯一的一个DOM节点。document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。

例如：

// 返回ID为'test'的节点：
var test=document.getElementById('test');

// 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
var trs=document.getElementById('test-table').getElementsByTagName('tr');

// 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
var reds=document.getElementById('test-div').getElementsByClassName('red');

// 获取节点test下的所有直属子节点:
var cs=test.children;

// 获取节点test下第一个、最后一个子节点：
var first=test.firstElementChild;
var last=test.lastElementChild;

第二种方法是使用querySelector()和querySelectorAll()，需要了解selector语法，然后使用条件来获取节点，更加方便：

// 通过querySelector获取ID为q1的节点：
var q1=document.querySelector('#q1');

// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps=q1.querySelectorAll('div.highlighted > p');

注意：低版本的IE<8不支持querySelector和querySelectorAll。IE8仅有限支持。

严格地讲，我们这里的DOM节点是指Element，但是DOM节点实际上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等很多种，以及根节点Document类型，但是，绝大多数时候我们只关心Element，也就是实际控制页面结构的Node，其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document。

练习

如下的HTML结构

<!-- HTML结构 -->
<div id="test-div">
<div class="c-red">
    <p id="test-p">JavaScript</p>
    <p>Java</p>
  </div>
  <div class="c-red c-green">
    <p>Python</p>
    <p>Ruby</p>
    <p>Swift</p>
  </div>
  <div class="c-green">
    <p>Scheme</p>
    <p>Haskell</p>
  </div>
</div>

请选择出指定条件的节点：

'use strict';

// 测试:
if (!js || js.innerText !=='JavaScript') {
    alert('选择JavaScript失败!');
} else if (!arr || arr.length !==3 || !arr[0] || !arr[1] || !arr[2] || arr[0].innerText !=='Python' || arr[1].innerText !=='Ruby' || arr[2].innerText !=='Swift') {
    console.log('选择Python,Ruby,Swift失败!');
} else if (!haskell || haskell.innerText !=='Haskell') {
    console.log('选择Haskell失败!');
} else {
    console.log('测试通过!');
}

DOM

文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口

它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容

任何 HTML或XML文档都可以用 DOM表示为一个由节点构成的层级结构

节点分很多类型，每种类型对应着文档中不同的信息和（或）标记，也都有自己不同的特性、数据和方法，而且与其他类型有某种关系，如下所示：

<html>
    <head>
        <title>Page</title>
    </head>
    <body>
        <p>Hello World!</p >
    </body>
</html>

DOM像原子包含着亚原子微粒那样，也有很多类型的DOM节点包含着其他类型的节点。接下来我们先看看其中的三种：

<div>
    <p title="title">
        content
    </p >
</div>

上述结构中，div、p就是元素节点，content就是文本节点，title就是属性节点

操作

日常前端开发，我们都离不开DOM操作

在以前，我们使用Jquery，zepto等库来操作DOM，之后在vue，Angular，React等框架出现后，我们通过操作数据来控制DOM（绝大多数时候），越来越少的去直接操作DOM

但这并不代表原生操作不重要。相反，DOM操作才能有助于我们理解框架深层的内容

下面就来分析DOM常见的操作，主要分为：

创建节点
查询节点
更新节点
添加节点
删除节点

创建节点

// 创建一个html元素，这里以创建h3元素为例
document.createElement("h3")

// 创建一个文本节点；
document.createTextNode(String);

// 创建一个属性节点，这里以创建class属性为例
document.createAttribute("class");

createElement

创建新元素，接受一个参数，即要创建元素的标签名

const divEl=document.createElement("div");

createTextNode

创建一个文本节点

const textEl=document.createTextNode("content");

createDocumentFragment

用来创建一个文档碎片，它表示一种轻量级的文档，主要是用来存储临时节点，然后把文档碎片的内容一次性添加到DOM中

const fragment=document.createDocumentFragment();

当请求把一个DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment自身，而是它的所有子孙节点

createAttribute

创建属性节点，可以是自定义属性

const dataAttribute=document.createAttribute('custom');
consle.log(dataAttribute);

获取节点

// 通过id号来获取元素，返回一个元素对象
document.getElementById(idName) 
      
// 通过name属性获取id号，返回元素对象数组 
document.getElementsByName(name)  
   
// 通过class来获取元素，返回元素对象数组
document.getElementsByClassName(className)   

// 通过标签名获取元素，返回元素对象数组
document.getElementsByTagName(tagName) 

//不需要兼容IE      
document.querySelector('#idxxx')

document.querySelectorAll('.red')[0]

document.querySelectorAll('#idxxx')[0]

querySelector

传入任何有效的css 选择器，即可选中单个 DOM元素（首个）：

document.querySelector('.element')
document.querySelector('#element')
document.querySelector('div')
document.querySelector('[name="username"]')
document.querySelector('div + p > span')

如果页面上没有指定的元素时，返回 null

querySelectorAll

返回一个包含节点子树内所有与之相匹配的Element节点列表，如果没有相匹配的，则返回一个空节点列表

const notLive=document.querySelectorAll("p");

需要注意的是，该方法返回的是一个 NodeList的静态实例，它是一个静态的“快照”，而非“实时”的查询

关于获取DOM元素的方法还有如下，就不一一述说

document.getElementById('id属性值');返回拥有指定id的对象的引用
document.getElementsByClassName('class属性值');返回拥有指定class的对象集合
document.getElementsByTagName('标签名');返回拥有指定标签名的对象集合
document.getElementsByName('name属性值'); 返回拥有指定名称的对象结合
document/element.querySelector('CSS选择器');  仅返回第一个匹配的元素
document/element.querySelectorAll('CSS选择器');   返回所有匹配的元素
document.documentElement;  获取页面中的HTML标签
document.body; 获取页面中的BODY标签
document.all[''];  获取页面中的所有元素节点的对象集合型

除此之外，每个DOM元素还有parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling属性，关系图如下图所示

更新节点

innerHTML

不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树

// 获取<p id="p">...</p >
var p=document.getElementById('p');
// 设置文本为abc:
p.innerHTML='ABC'; // <p id="p">ABC</p >
// 设置HTML:
p.innerHTML='ABC <span style="color:red">RED</span> XYZ';
// <p>...</p >的内部结构已修改

innerText、textContent

自动对字符串进行HTML编码，保证无法设置任何HTML标签

// 获取<p id="p-id">...</p >
var p=document.getElementById('p-id');
// 设置文本:
p.innerText='<script>alert("Hi")</script>';
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id"><script>alert("Hi")</script></p >

两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本

style

DOM节点的style属性对应所有的CSS，可以直接获取或设置。遇到-需要转化为驼峰命名

// 获取<p id="p-id">...</p >
const p=document.getElementById('p-id');
// 设置CSS:
p.style.color='#ff0000';
p.style.fontSize='20px'; // 驼峰命名
p.style.paddingTop='2em';

添加节点

// 创建一个html元素，这里以创建h3元素为例
document.createElement("h3")

// 创建一个文本节点；
document.createTextNode(String);

// 创建一个属性节点，这里以创建class属性为例
document.createAttribute("class");
// 往element内部最后面添加一个节点，参数是节点类型
element.appendChild(Node);

// 在element内部的中在existingNode前面插入newNode
elelment.insertBefore(newNode,existingNode);

获取当前元素的同级元素

// 返回当前元素的下一个同级元素 没有就返回null
element.nextSibling

// 返回当前元素上一个同级元素 没有就返回 null
element.previousSibling

获取当前元素的文本

// 返回元素的所有文本，包括html代码
element.innerHTML

// 返回当前元素的自身及子代所有文本值，只是文本内容，不包括html代码
element.innerText

获取当前节点的节点类型

// 返回节点的类型,数字形式（1-12）
// 常见几个1：元素节点，2：属性节点，3：文本节点。
node.nodeType

设置样式

// 设置元素的样式时使用style
element.style.color=“#eea”;

innerHTML

如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML='<span>child</span>'就可以修改DOM节点的内容，相当于添加了新的DOM节点

如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点

appendChild

把一个子节点添加到父节点的最后一个子节点

举个例子

<!-- HTML结构 -->
<p id="js">JavaScript</p >
<div id="list">
    <p id="java">Java</p >
    <p id="python">Python</p >
    <p id="scheme">Scheme</p >
</div>

添加一个p元素

const js=document.getElementById('js')
js.innerHTML="JavaScript"
const list=document.getElementById('list');
list.appendChild(js);

现在HTML结构变成了下面

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p >
    <p id="python">Python</p >
    <p id="scheme">Scheme</p >
    <p id="js">JavaScript</p >  <!-- 添加元素 -->
</div>

上述代码中，我们是获取DOM元素后再进行添加操作，这个js节点是已经存在当前文档树中，因此这个节点首先会从原先的位置删除，再插入到新的位置

如果动态添加新的节点，则先创建一个新的节点，然后插入到指定的位置

const list=document.getElementById('list'),
const haskell=document.createElement('p');
haskell.id='haskell';
haskell.innerText='Haskell';
list.appendChild(haskell);

insertBefore

把子节点插入到指定的位置，使用方法如下：

parentElement.insertBefore(newElement, referenceElement)

子节点会插入到referenceElement之前

setAttribute

// 括号传入属性名，返回对应属性的属性值
element.getAttribute(attributeName)

// 传入属性名及设置的值
element.setAttribute(attributeName,attributeValue)

在指定元素中添加一个属性节点，如果元素中已有该属性改变属性值

const div=document.getElementById('id')
div.setAttribute('class', 'white');//第一个参数属性名，第二个参数属性值。

删除节点

删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉

// 拿到待删除节点:
const self=document.getElementById('to-be-removed');
// 拿到父节点:
const parent=self.parentElement;
// 删除:
const removed=parent.removeChild(self);
removed===self; // true

删除后的节点虽然不在文档树中了，但其实它还在内存中，可以随时再次被添加到别的位置

给大家分享我收集整理的各种学习资料，前端小白交学习流程，入门教程等回答-下面是学习资料参考。

前端学习交流、自学、学习资料等推荐 - 知乎

用新标签

header：定义文档的页眉头部
nav：定义导航链接的部分
footer：定义文档或节的页脚底部
article：定义文章。
section：定义文档中的节（section、区段）
aside：定义其所处内容之外的内容侧边

新增的input type属性

类型使用示例含义email输入邮箱格式tel输入手机号码格式url输入url格式number输入数字格式search搜索框（体现语义化）range自由拖动滑块time小时分钟date年月日datetime时间month月年week星期年

常用新属性

属性用法含义placeholder占位符当用户输入的时候里面的文字消失删除所有文字，自动返回autofocus规定当页面加载时 input 元素应该自动获得焦点multiple多文件上传autocomplete规定表单是否应该启用自动完成功能有2个值，一个是on 一个是off on 代表记录已经输入的值 1.autocomplete 首先需要提交按钮

2.这个表单您必须给他名字required必填项内容不能为空accesskey规定激活（使元素获得焦点）元素的快捷键采用 alt + s的形式

datalist

datalist标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。使用 input 元素的 list 属性来绑定 datalist。

示例

<body>

</datalist>

</body>

TML5属于上一代HTML的升级语言，设计HTML5最主要的目的是为了在移动设备上支持多媒体！！！

好处：跨平台：

例如：比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以它的跨平台性非常强大，这也是大多数人对HTML5有兴趣的主要原因。

缺点：

pc端浏览器支持不是特别友好，造成用户体验不佳(随着移动端的发展不断扩大和win10（ie10）的大量推广，这一缺点将被无限缩小)

新特性：

1. 取消了过时的显示效果标记 <font></font> 和 <center></center>等...

2. 新语义标签的引入

3. 新表单元素引入

4. canvas标签（图形设计）

5. 本地数据库（本地存储）

6. 一些API

1.HTML5新语义标签

HTML5新标签的数量在25个左右具体也没有找到详细的资料来查看（每个网站显示的数量都不一样）

虽然新增的标签很多但是实际上用到的应该只有十个左右MDN上有一句话

“HTML 使用“标记”来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如 <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img> 等等。”

这其中大部分有HTML5以前的标签也有HTML5的而这些刚好就是我们常用的标签，不常用的也许不必太过了解布局DIV也可以不是么？

另外推荐大家在使用新语义标签的时候尽量每个独立的页面只使用一个标签作为包裹，语义化的作用就是seo（具体可百度），就是让搜索引擎知道网上到底有些什么，如header 、main、footer标签等等，当然你也可以写100个！

以下总结出HTML5常用的标签： “header” “nav” “main”“article” “address”“section”“aside” “footer”

如果忘记了这些标签的意思可以访问 MDN、W3C、或者CSND,当然博客园上搜搜可能会更快。

2.HTML5的重点标签之video和audio

<video></video> 视频

属性：controls 显示控制栏

属性：autoplay 自动播放

属性：loop 设置循环播放

<audio></audio> 音频

属性：controls 显示控制栏

属性：autoplay 自动播放

属性：loop 设置循环播放

video标签支持的格式 http://www.w3school.com.cn/html5/html_5_video.asp

多媒体标签在网页中的兼容效果方式（每个浏览器支持的情况不同所以需要做兼容性处理）

（以下source属性只会生效一个即 if=true 之后就不执行了）

3.HTML5中的智能表单控件

type值=

email: 输入合法的邮箱地址

url：输入合法的网址

number：只能输入数字

range：滑块

color：拾色器

date：显示日期

month：显示月份

week ：显示第几周

time：显示时间

（智能表单，会自动对输入的内容做基本校验，内容不符合基本校验则拒绝提交请求

表单属性

◆form属性：

autocomplete=on | off 自动完成

novalidate=true | false 是否关闭校验

◆ input属性：

autofocus ：自动获取焦点

multiple：实现多选效果

placeholder ：占位符（提示信息）

required：必填项

本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案，使用sessionStorage和localStorage存储数据。

localStorage：

1. 永久生效

2. 多窗口共享

3. 容量大约为20M

◆window.localStorage.setItem(key,value) 设置存储内容

◆window.localStorage.getItem(key) 获取内容

◆window.localStorage.removeItem(key) 删除内容

◆window.localStorage.clear() 清空内容

sessionStorage：

1. 生命周期为关闭当前浏览器窗口

2. 可以在同一个窗口下访问

3. 数据大小为5M左右

◆window.sessionStorage.setItem(key,value)

◆window.sessionStorage.getItem(key)

◆window.sessionStorage.removeItem(key)

◆window.sessionStorage.clear()

required如何修改默认提示选项

需要两个几个参数

placeholder=默认提示用户输入

oninvalid事件=当用户输入不符合规则的时候提示的内容随意改setCustomValidity 就是用来修改 requered值的函数

oninput事件=约等于chuange事件立即执行

4.HTML5中新的一些API

以前获取节点通过

document.getElementById("ID名称")这些还有className，name，tagname等等方式获取返回当前节点

H5新增的节点获取方法只有两个

document.querySelector("选择器")；返回节点

document.querySelectorAll("选择器"); 返回数组

可以完美的代替以前或者节点的方式，如果无需兼容ie10以下的话

H5中对class的操作

classList.add("类名")

添加class类名不返回任何值如果你把它赋值给一个变量得到结果是undefined

classList.remove("类名"); 删除

classList.contains("类名");

检查has className 是否存在返回布尔值即true and false

classList.toggle("active");

查询active 是否存在，存在就删除，不存在就添加，省去了if判断！返回布尔值如果执行多条即 true false true false.

自定义属性（小案例分析体验自定义属性） data-自定义属性名

1. 获取自定义属性 Dom.dataset 返回的是一个对象

Dom.dataset.属性名或者 Dom.dataset[属性名]

注：属性名无需加data如自定义属性名=data-canvas 那么获取的时候直接dataset.canvas即可设置同理

2. 设置自定义属性

Dom.dataset.自定义属性名=值或者 Dom.dataset[自定义属性名]=值；

文件读取 FileReader

FileReader 接口有3个用来读取文件方法返回结果在result中

readAsBinaryString ---将文件读取为二进制编码

readAsText ---将文件读取为文本

readAsDataURL ---将文件读取为DataURL

FileReader 提供的事件模型

onabort 中断时触发

onerror 出错时触发

onload 文件读取成功完成时触发

onloadend 读取完成触发，无论成功或失败

onloadstart 读取开始时触发

onprogress 读取中

获取当前网络状态

window.navigator.onLine 返回一个布尔值网没问题返回true否则返回false

网络状态事件（大部分为不支持和废弃状态也许移动端用的比较多）

1. window.ononline

2. window.onoffline

获取地理定位

获取一次当前位置

window.navigator.geolocation.getCurrentPosition(success,error);

success成功之后获取位置信息否则抛出错误，比如获取位置信息被拒绝

1. coords.latitude 维度

2. coords.longitude 经度

实时获取当前位置

window.navigator.geolocation.watchPosition(success,error);

以上内容或有不足，欢迎各位指出补充，谢谢。

在线咨询

上一篇：web中直接操作DOM为什么慢？
下一篇：JavaScript中各种源码实现（前端面试笔试必备

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5节点操作，HTML节点元素常用的DOM操作

OM结构

练习

DOM

操作

创建节点

createElement

createTextNode

createDocumentFragment

createAttribute

获取节点

querySelector

querySelectorAll

更新节点

innerHTML

innerText、textContent

style

添加节点

innerHTML

appendChild

insertBefore

setAttribute

删除节点

您的项目需求