文档章节

属性 元素的内容 创建,插入和删除节点 虚拟节点

o
 osc_4nmshwhm
发布于 2018/08/07 03:31
字数 1989
阅读 10
收藏 0

精选30+云产品,助力企业轻松上云!>>>

属性

html元素由一个标签和一组称为属性的名/值对组成。

HTML

表示HTML文档元素的HTMLElement对象定义了读/写属性。映射了元素的HTML属性。HTMLElement定义了通用的HTTP属性。以及事件处理程序的属性。特定的Element子类型为其元素定义了特定的属性。 举个栗子

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<img id="myimage" src="./image/1.png" title="图片"/>
	<form>
		<input type="text" name="id"/>
	</form>
</body>
</html>

js如下

var image = document.getElementById("myimage"); // 获取id为myimage的元素
var imagurl = image.src     // 获取该元素的imagurl

控制台输入如下

imagurl
"http://1.198.105.7/image/1.png"

成功获取了img元素的src地址 下面为一个form元素设置表单属性

var f = document.forms[0];	// 获取第一个form元素
f.action = "./submit/"  // 设置提交地址
f.method = "POST";  // 设置提交方式为post提交

设置完成,提交表单

http://1.198.105.7/submit/

链接跳转到上方地址,接着查看浏览器,查看提交的post数据即可查到提交的post数据

ps 不能在头部引入,会出现找不到DOM节点的情况,请在文末引入

获取和设置非标准的HTML属性

现在说的是一个html的属性,即HTMLElemnent对象定义的html的一些属性

Element.getAttribute()

该属性的获取传入属性的属性值。 将会返回一个字符串

image.getAttribute("src")
"./image/1.png"

数据集属性

可以在元素上添加属性,然后能通过js读取其数据 h5在Elemnent对象上定义了dataset属性,该属性指代一个对象,它的各个属性对于去掉前缀的data-属性,因此dataset.x的应该保存为data-x属性的值,如果后方有字符串,将会按照驼峰命名法命名data-jquery-test将会办成dataset。jqueryTest 下面生成一个火花线 html如下所示

<span class="sparkLine" data-ymin="0" data-ymax="10">
	1 1 1 2 2 3 4 5 5 4 3 5 4 3 5 3 6 2 4 5 2 4
</span>
var sparkLines = document.getElementsByClassName("sparkLine");
for (var i = 0; i < sparkLines.length; i++) {
	var dataset = sparkLines[i].dataset;	// 将自定义的属性保存在dataset中
	var ymin = parseFloat(dataset.ymin);	// 将ymin字符转换为浮点数进行存储
	var ymax = parseFloat(dataset.ymax);	// 同理获取最大值
	var data = sparkLines[i].textContent.split(" ").map(parseFloat);	// 获取节点的内容,依照空格进行分割,并将值依次转换为数值
	console.log(data);
}

可以看到控制台已经输出一个数组了。

作为attr节点的属性

一种使用Element的属性的方法。Node类型定义了attributes属性。针对非Element对象任何节点。该属性为null。 获取属性的 举例子

document.body.attributes[0];    // 获取第一个body的第一个属性
document.body.attributes.bgcolor;   // 获取bgcolor属性
document.body.attributes["NOLOAD"]  // 获取元素的onload属性 因为会自动转为大写故因此。

元素的内容

作为HTML的元素内容

以标签作为分隔

<div id="target">This is the element content!</div>
beforebegin     afterbegin              beforeend   afterend

获取内容,上方的是插入元素的内容

nodeList[0].innerHTML
以及
nodeList[0].textContent
该两个方法相同

使用innerHTML可以获取元素的内容 同样也可以使用这个方法进行更改

nodeList[0].innerHTML = "hello word"

将会把页面内容更改为hello word

script元素中的文本

内联的script元素,有一个text属性能来获取它们的文本,该文本存在于树中,但是并不会将其显示出来

作为text节点的元素内容

另一中方法处理元素的内容是当做一个子节点列表。每个子节点可能有它自己的一组子节点。 假设html如下

<span class="sparkLine" data-ymin="0" data-ymax="10">hell<span>o w</span>ord</span>
nodeList[0].innerHTML
"hell<span>o w</span>ord"
nodeList[0].textContent;
"hello word"

上方代码很明显的看到innerHTML会返回其中的HTML代码,包括标签 但是textContent不会,会把所有的内容统统返回

插入元素内容

有两个定义好的api分别是element.insertAdjacentHTML 以及 Element.insertAdjacentText() 这两个元素内容

element.insertAdjacentHTML()

这个会将文本解析为html或者xml,并且将结果插入指定的DOM树的位置。因为它不会重新解析正在使用的元素,因此它不会破坏元素内的现有元素。将会避免额外的序列化步骤,比直接innerHTML将会快很多。

document.getElementById("myimage").insertAdjacentHTML("beforebegin", html)

完成了一次在前方的插入一个div的节点。 此节点插入的html会被html解析器进行解析,如果用户插入请务必进行转义,防止小白攻击法

Element.insertAdjacentText()

这个仅仅是插入文本,建议一般使用这个,将不会产生dom树的解析

var h = document.getElementById("myH2");
h.insertAdjacentText("afterend", "My inserted text");

这样就完成了,一次dom节点的更新 即使插入

h.insertAdjacentText("afterend", "<div></div>")

也不会被dom解析

创建,插入和删除节点

创建节点

创建一个text节点

var newnode = document.createTextNode("hello word")

查看其内容

#text "hello word"

继续,创建一个正常的元素

var newnode = document.createElement("script")

将其插入id为myimage的元素后边

myimage.appendChild(newnode)

插入节点

一旦有了一个新节点可以使用Node方法的appendChild或者insertBefore()将其完成插入。 https://developer.mozilla.org/zh-CN/docs/Web/API/Node/insertBefore https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild 如果调用插入的方法将文档中的一个节点再次插入,那个节点将会自动从它当前的位置删除并在新的位置重新插入,没有必要显式的删除节点,因为节点已经自动隐式删除了。

删除和替换节点

removeChild()方法重文档树中删除一个节点。该方法不在待删除的节点上调用,而是在其父节点上调用(和名字暗示那样的child)然后将其子节点删除。

n.parentNode.removeChild(n)

将会删除n节点的子节点的n节点 replaceChild()方法删除一个子节点并用一个新的节点取而代之,在父节点上调用该方法。用一个文本字符串来替换节点n

n.parentNode.replaceChild(document.createTextNode("[ REDACTED ]"), n);

一个栗子

// 用一个新的<b>元素替换n节点,并使n成为该元素的子节点
function embolden(n) {
	// 根据参数为字符串而不是节点,将其当做元素的id,进行查询得到节点,如果传入的是节点,直接进行下一步
	if (typeof n == "string") n = document.getElementById(n);
	var parent = n.parentNode;	// 获得n的父节点
	var b = document.createElement("b");	// 创建一个<b>元素
	parent.replaceChild(b, n);	// 进行替换操作
	b.appendChild(n);	// 使得n成为父节点的子节点
};

通过api完成子节点的替换,使用方法,调用一个removeChild以及parentNode完成一次调用

一个虚拟节点

var p = document.createElement("p");
undefined
p;
<p>
container.appendChild(p);
<p>
container
<div>
a;
<body>
a.appendChild(container)
<div>
p;
<p>
p.textContent = "hello word!"
"hello word!"

好啦,页面成功更新,使用虚拟节点拼接完成一个比较完成的树,在将其拼接到body的子节点中,彻底的完成节点操作

DocumentFragment

DocumentFragment 为一种特殊的Node,其作为其他节点的一个临时容器。 它的特殊之处在于它能使得一组节点被当做一个节点看待。

举栗子

倒序排列节点n的子节点

// 倒序排列节点n的子节点
function reverse(n) {
	// 创建一个DocumentFragment 座位临时容器
	var f = document.createDocumentFragment();
	// 从后到前循环子节点,使得每一个子节点移动到临时容器中
	// n的最后一个节点变成f的第一个节点
	// 每次给f添加一个节点该节点会自动从n中删除
	while(n.lastChild) f.appendChild(n.lastChild);	// 添加子节点


	// 最后,把f的所有子节点一次性全部移回n中
	n.appendChild(f);
};

insertAdjacentHTML() 将指定的文本解析为HTML或XML,并将结果节点插入到DOM树中的指定位置。

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
6. Vue内部是如何渲染视图

虚拟DOM与VNode简介 什么是虚拟DOM 以前M的命令式操作DOM即使用jQuery操作DOM节点,随着状态的增多,DOM的操作就会越来越频繁,程序的状态也越难维护,现在主流的框架都是采用声明式操作DOM...

小旋风我来了
2019/09/01
0
0
DocumentFragment类型

nodeType  11 nodeName  #document-fragment nodeValue  NULL parentNode  null createdocumentfragment()方法创建了一虚拟的节点对象,节点对象包含所有属性和方法。 当你想提取文档...

osc_88wjsceo
2018/08/16
2
0
《Vue不看源码懂原理》系列——Vue的diff算法不难懂

虚拟DOM 首先要说diff算法之前,还是稍微解释一下虚拟DOM,虽然大部分人都知道虚拟DOM的概念了。 首先,很多人没有意识到一个问题,现代前端框架为我们解决了什么? 我认为前端现代框架解决的...

龙小胖
03/31
0
0
createDocumentFragment()用法总结

1.createDocumentFragment()方法,是用来创建一个虚拟的节点对象,或者说,是用来创建文档碎片节点。它可以包含各种类型的节点,在创建之初是空的。 2.DocumentFragment节点不属于文档树,继...

osc_7cexpmnb
2019/04/01
3
0
【转载】原生JS与jQuery操作DOM对比

原文地址 http://blog.poetries.top/2017/01/14/js-and-jquery-dom-compare/ 一、创建元素节点 1.1 原生创建元素节点 1 document.createElement("p"); 1.2 创建元素节点 1 $('<p></p>');二、......

osc_pnw2apz4
2018/03/07
3
0

没有更多内容

加载失败,请刷新页面

加载更多

深入浅出Zabbix 3.0 -- 第二章 Zabbix Web操作与定义

第二章 Zabbix Web操作与定义 本章介绍Zabbix 中一些基本概念的定义和web前端页面的操作,包括Zabbix中使用的一些术语的定义,Web页面中用户管理、主机和主机组的管理,以及监控项、模板、触...

osc_5zaxkz1e
17分钟前
14
0
深入浅出Zabbix 3.0 -- 第一章 Zabbix 安装与配置

第一章 Zabbix 安装与配置 1.1 Zabbix 介绍 Zabbix是一个企业级的开源监控软件,可以监控IT基础架构的可用性和应用的性能,为用户提供集中管理、分布式监控的一站式(all in one)监控解决方...

osc_nvkeo9cj
18分钟前
10
0
PHP 实现抽奖逻辑

public static function get_rand($proArr) { $result = ''; //概率数组的总概率精度 $proSum = array_sum($proArr); //概率数组循环 forea......

chenhongjiang
18分钟前
18
0
struts2 上传 下载

东方部落: http://11144439.blog.51cto.com struts中上传文件功能小测试。这里jar是 2.5 版本。 项目结构图 废话不多说,直接代码。 2. web.xml配置 <?xml version="1.0" encoding="UTF-8......

osc_1qix3fyb
19分钟前
31
0
SVN管理系统安装及其操作

SVN管理系统安装及操作 防伪码:学习永远不晚! 前言: SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS、CVS,它采用了分支管理系统,它的设计目标就是取代CVS。互联网上...

osc_afifi2qt
20分钟前
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部