摘要：属性元素由一个标签和一组称为属性的名值对组成。删除和替换节点方法重文档树中删除一个节点。将会删除节点的子节点的节点方法删除一个子节点并用一个新的节点取而代之，在父节点上调用该方法。
属性
html元素由一个标签和一组称为属性的名/值对组成。
HTML表示HTML文档元素的HTMLElement对象定义了读/写属性。映射了元素的HTML属性。HTMLElement定义了通用的HTTP属性。以及事件处理程序的属性。特定的Element子类型为其元素定义了特定的属性。
举个栗子
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如下所示
1 1 1 2 2 3 4 5 5 4 3 5 4 3 5 3 6 2 4 5 2 4
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的元素内容
以标签作为分隔
This is the element content!beforebegin afterbegin beforeend afterend
获取内容，上方的是插入元素的内容
nodeList[0].innerHTML 以及 nodeList[0].textContent 该两个方法相同
使用innerHTML可以获取元素的内容
同样也可以使用这个方法进行更改
nodeList[0].innerHTML = "hello word"
将会把页面内容更改为hello word
script元素中的文本内联的script元素，有一个text属性能来获取它们的文本，该文本存在于树中，但是并不会将其显示出来
作为text节点的元素内容另一中方法处理元素的内容是当做一个子节点列表。每个子节点可能有它自己的一组子节点。
假设html如下
hello word
nodeList[0].innerHTML
"hello word"
nodeList[0].textContent;
"hello word"
上方代码很明显的看到innerHTML会返回其中的HTML代码，包括标签
但是textContent不会，会把所有的内容统统返回
有两个定义好的api分别是element.insertAdjacentHTML 以及 Element.insertAdjacentText()
这两个元素内容
这个会将文本解析为html或者xml，并且将结果插入指定的DOM树的位置。因为它不会重新解析正在使用的元素，因此它不会破坏元素内的现有元素。将会避免额外的序列化步骤，比直接innerHTML将会快很多。
document.getElementById("myimage").insertAdjacentHTML("beforebegin", html)
完成了一次在前方的插入一个div的节点。
此节点插入的html会被html解析器进行解析，如果用户插入请务必进行转义，防止小白攻击法
这个仅仅是插入文本，建议一般使用这个，将不会产生dom树的解析
var h = document.getElementById("myH2");
h.insertAdjacentText("afterend", "My inserted text");
这样就完成了，一次dom节点的更新
即使插入
h.insertAdjacentText("afterend", "")
也不会被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);
一个栗子
// 用一个新的元素替换n节点，并使n成为该元素的子节点
function embolden(n) {
// 根据参数为字符串而不是节点，将其当做元素的id,进行查询得到节点,如果传入的是节点，直接进行下一步
if (typeof n == "string") n = document.getElementById(n);
var parent = n.parentNode; // 获得n的父节点
var b = document.createElement("b"); // 创建一个元素
parent.replaceChild(b, n); // 进行替换操作
b.appendChild(n); // 使得n成为父节点的子节点
};
通过api完成子节点的替换，使用方法，调用一个removeChild以及parentNode完成一次调用
一个虚拟节点var p = document.createElement("p");
undefined
p;
container.appendChild(p);
container
a;
a.appendChild(container)
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树中的指定位置。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96662.html
相关文章
-
前端知识点总结——DOM
摘要：前端知识点总结什么是什么是专门操作网页内容的标准为什么统一不同浏览器操作网页内容的标准优点几乎所有浏览器兼容什么是网页中所有内容在内存中都是保存在一棵树形结构中网页中每项内容元素文本属性注释，都是树上的一个节点对象。
前端知识点总结——DOM
1.什么是DOM: Document Object Model
什么是: 专门操作网页内容的API标准——w3c 为什么: 统一不同浏览器操作网...
-
虚拟 DOM 到底是什么？
摘要：很多人认为虚拟最大的优势是算法，减少操作真实的带来的性能消耗。虽然这一个虚拟带来的一个优势，但并不是全部。回到最开始的问题，虚拟到底是什么，说简单点，就是一个普通的对象，包含了三个属性。
是什么？
虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex）。因...
-
Deep In React 之详谈 React 16 Diff 策略(二)
摘要：对于同一层级的一组子节点，它们可以通过唯一进行区分。基于以上三个前提策略，分别对以及进行算法优化。链表的每一个节点是，而不是在之前的虚拟节点。是当前层的第一个节点。再次提醒，是的一层。
文章首发于个人博客
这是我 Deep In React 系列的第二篇文章，如果还没有读过的强烈建议你先读第一篇：详谈 React Fiber 架构(1)。
前言
我相信在看这篇文章的读者一般都已经了解...
-
vue源码阅读之数据渲染过程
摘要：图在中应用三数据渲染过程数据绑定实现逻辑本节正式分析从到数据渲染到页面的过程，在中定义了一个的构造函数。一、概述
vue已是目前国内前端web端三分天下之一，也是工作中主要技术栈之一。在日常使用中知其然也好奇着所以然，因此尝试阅读vue源码并进行总结。本文旨在梳理初始化页面时data中的数据是如何渲染到页面上的。本文将带着这个疑问一点点追究vue的思路。总体来说vue模版渲染大致流程如图1所...
-
Vue源码解析：虚拟dom比较原理
摘要：算法子节点比较这部分代码比较多，先说说原理后面再贴代码。循环结束的标志就是旧子节点数组或新子节点数组遍历完，即。第二步尾尾比较。第三步头尾比较。第四步尾头比较。节点确认后，真实序列为，未确认序列为第五次是均不相似，直接插入到未确认序列头部。
通过对 Vue2.0 源码阅读，想写一写自己的理解，能力有限故从尤大佬2016.4.11第一次提交开始读，准备陆续写：
模版字符串转AST语法...
发表评论
0条评论
阅读 2956·2021-11-11 16:55
阅读 517·2021-09-27 13:36
阅读 1077·2021-09-22 15:35
阅读 2909·2019-08-30 12:46
阅读 3127·2019-08-26 17:02
阅读 1827·2019-08-26 11:56
阅读 1297·2019-08-26 11:47
阅读 424·2019-08-23 17:01
