属性元素的内容创建，插入和删除节点虚拟节点（元素创造）

属性

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

HTML

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

举个栗子

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img id="myimage" src="//img.17u1u.com/./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将会快很多。