属性 元素的内容 创建,插入和删除节点 虚拟节点-阿里云开发者社区

开发者社区> mysoul8021> 正文

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

简介:
+关注继续查看

属性

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树中的指定位置。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
机器学习时代,神经科学家如何阅读和解码人类的思想
作者:Jiying 编辑:Joni 这篇文章围绕机器学习(ML)和功能性磁共振成像(fMRI)的应用问题,以三篇最新的研究型论文为基础,探讨基于统计学中 ML 的 fMRI 分析方法。
6 0
Unexpected token o in JSON at position 1 前端JSON数据包解析的问题
这是一个前后端分离项目中常见的问题,关于json数据包的解析问题
9 0
全面进入云原生时代,拥抱Kubernetes,再见了Spring Cloud
相信很多开发者在熟悉微服务工作后,才发现: 以为用 Spring Cloud 已经成功打造了微服务架构帝国,殊不知引入了 k8s 后,却和云原生的生态发展脱轨
9 0
【Go语言入门100题】003 个位数统计 (15 分) Go语言|Golang
L1-003 个位数统计 (15 分) Go语言|Golang 输入格式: 每个输入包含 1 个测试用例,即一个不超过 1000 位的正整数 N。 输出格式: 对 N中每一种不同的个位数字,以 D:M 的格式在一行中输出该位数字 D及其在N中出现的次数M。要求按D 的升序输出。 输入样例:
8 0
【七天入门Go语言】 网络编程 | 第六天
目录 1. Socket 编程 1.1 Dial()函数 2. HTTP 编程 2.1 HTTP 客户端 2.2 HTTP 服务端 2.2.1 处理 HTTP 请求 3. RPC 编程 3.1 Go 语言中的 RPC 支持与处理 3.2 Gob 简介 3.3 设计优雅的 RPC 接口 最后
7 0
【超级账本】Fabric介绍及其环境搭建(一)
目录 前言 1. fabric 介绍 1.1 fabric和以太坊的区别 1.2 身份管理介绍 1.3 账本:每个节点中都有 1.4 交易管理介绍 1.5 节点介绍 1.6 通道介绍--channel 2. fabric 环境搭建 2.1 安装虚拟机 2.2 安装必要配置 2.2.1换源 2.2.2 安装vim 2.2.3 安装python2.7 以及 python-pip2 2.2.5 安装go 2.2.6 安装docker 2.2.7 安装docker-compose 2.2.8 Fabric的Docker镜像下载 2.2.9 拉取fabric代码 最后
5 0
【超级账本】Fabric 层次结构以及核心模块的介绍(二)
目录 1. 结构介绍 2. 核心代码 3. 核心模块 3.1 peer 系统模块 3.2 order 系统模块 3.3 cryptogen 工具模块 3.4 configtxgen 工具模块 3.5 configtxlator 工具模块 最后
8 0
【Go语言入门100题】005 考试座位号 (15 分) Go语言|Golang
L1-005 考试座位号 (15 分) Go语言|Golang 每个 PAT 考生在参加考试时都会被分配两个座位号,一个是试机座位,一个是考试座位。正常情况下,考生在入场时先得到试机座位号码,入座进入试机状态后,系统会显示该考生的考试座位号码,考试时考生需要换到考试座位就座。但有些考生迟到了,试机已经结束,他们只能拿着领到的试机座位号码求助于你,从后台查出他们的考试座位号码。
6 0
【七天入门Go语言】 文件 && 包 | 第五天
目录 1. 文件处理 1.1 JSON文件 1.1.1 已知JSON结构 1.1.2 未知JSON结构 1.1.3 Encoder & Decoder 1.2 XML文件 1.3 二进制文件 1.4 zip文件 1.4.1 创建zip 1.4.2 读取zip文件 2. 包管理 2.1 包路径 2.2 包声明 最后
6 0
【Go语言入门100题】023 输出GPLT (20 分) Go语言 | Golang
L1-023 输出GPLT (20 分) Go语言|Golang 给定一个长度不超过10000的、仅由英文字母构成的字符串。请将字符重新调整顺序,按GPLTGPLT....这样的顺序输出,并忽略其它字符。当然,四种字符(不区分大小写)的个数不一定是一样多的,若某种字符已经输出完,则余下的字符仍按GPLT的顺序打印,直到所有字符都被输出。 下面给出甲、乙两人的酒量(最多能喝多少杯不倒)和划拳记录,请你判断两个人谁先倒。
5 0
+关注
mysoul8021
佛系中
119
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载