js怎么解析html标签 _HTML|之间的互动(若是将其算作

今天小编介绍一下js如何解析html标签
JavaScript 与 HTML 最简单转化1JS 与 HTML 之间的互动(若是将其算作两种说话的话), 任何说话之间的转化道理是差不多的, 即伪装当作另一种说话. 怎么伪装? 最简单的就是经由过程字符串.
所以可以用
document.write("此处写HTML代码");
的体例
同理, js 判定HTML 也可以直接获取标签的内容即
thisNode.innerHTML
好比
<div id="test1">
<p><p>
<div>
我们可以获取div元素然后判定它的innerHTML是不是p, 输出:
console.log(document.getElementById("test1").innerHTML);

文章插图

文章插图

JavaScript 解析HTML 标签--道理1节点树与 DOM
上面提到的 JavaScript 与 HTML 之间的 "沟通" 很暴力并且无法应对复杂的环境. 但其实浏览器端的JavaScript 自己是自带了方式解析HTML的, 也就是我们耳熟能详的 DOM
DOM 是将HTML 翻译当作了对象(object), 然后js 经由过程对对象的操作来操作HTML, 可以或许解析HTML, 可以或许改变HTML.
因为HTML自己的标签是可以嵌套的, 即标签里面套着标签, 所以JS 中将其形象的称为节点树. 可以将每个节点理解为一个标签, 当前除了标签不测空白和文字也算是节点.(因为HTML里面除了标签也是有内容的啊)
节点的精确界说(W3C尺度)
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
这里的HTML 元素年夜致可以理解为标签

2JavaScript 节点与 HTML 标签
看到之前介绍的节点的界说, 那么我们就能理解 HTML 的一个标签是 JS 中的一个节点, 且标签的属性, 内容属于这个标签, 也就是JS中该标签节点的子节点.
那么不难看出, 若是我们想要经由过程 JS 解析 HTML 标签就是获取到我们的方针节点, 拿来用就可以了. 道理讲解到这里, 想要领会想起的同窗可以自行搜刮 "DOM 节点" 相关常识
下面就会具体分化
如何解析HTML 标签

JavaScript 解析 HTML 标签具体
1如下图例, 是一个HTML 文档, 里面有一个div 标签, div标签里面有个段落, 段落里面是一个超链接(a 标签)
我们就用这个文档来示例 JavaScript 如何解析 HTML
这里面用到的 console.log() 是在节制台输出成果 (一般浏览器按F12 然后点击 console/节制台项, 就能看到输出成果, 详情自行百度 "console.log()" )

文章插图

2获取该 HTML 标签中的节点
获取 HTML 节点(标签) 的体例有三种 (按照 id, 按照标签名, 按照 class类名), 即
getElementById()--按照id
getElementsByTagName()--按照标签名
getElementsByClassName()--按照类名
我们可以将HTML 比方当作一个班级
当我们用 id 的方式就半斤八两于: 名字叫某某某的同窗请站起来
我们用标签(tag) 方式就半斤八两于: 班里的男生请站起来(是一部门人, 可能是一个, 也可能是几个)
我们用class(类名)方式半斤八两于: 健忘交功课的同窗请站起来.