属性
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…
https://developer.mozilla.org…
假如挪用插进去的要领将文档中的一个节点再次插进去，谁人节点将会自动从它当前的位置删除并在新的位置从新插进去，没有必要显式的删除节点，由于节点已自动隐式删除了。
删除和替代节点
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树中的指定位置。
