js怎么解析html标签
1、JS 与 HTML 之间的互动(如果将其看成两种语言的话), 任何语言之间的转化原理是差不多的, 即伪装成另一种语言. 怎么伪装? 最简单的就是通过字符串.
所以 可以用
document.write("此处写HTML代码");
的方式
同理, js 判断HTML 也可以 直接获取标签的内容即
thisNode.innerHTML
比如
<div id="test1">
<div>
我们可以获取div元素然后判断它的innerHTML是不是p, 输出:
console.log(document.getElementById("test1").innerHTML);
1、节点树 与 DOM
上面提到的 JavaScript 与 HTML 之间的 "沟通" 很暴力而且无法应对复杂的情况. 但其实 浏览器端的JavaScript 本身是自带了方法解析HTML的, 也就是我们耳熟能详的 DOM
DOM 是将HTML 翻译成了对象(object), 然后js 通过对 对象的操作来操作HTML, 能够解析HTML, 能够改变HTML.
因为HTML本身的标签是可以嵌套的, 即标签里面套着标签, 所以JS 中将其形象的称为 节点树. 可以将每个节点理解为一个标签, 当前除了标签意外空白和文字也算是节点.(因为HTML里面除了标签也是有内容的啊)
节点的准确定义(W3C标准)
整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
这里的HTML 元素 大致可以理解为标签
2、JavaScript 节点 与 HTML 标签
看到之前介绍的节点的定义, 那么我们就能理解 HTML 的一个标签 是 JS 中的一个节点, 且 标签的属性, 内容 属于这个标签, 也就是JS中该标签节点的子节点.
那么不难看出, 如果我们想要 通过 JS 解析 HTML 标签 就是 获取到我们的目标节点, 拿来用就可以了. 原理讲解到这里, 想要了解想起的同学可以自行搜索 "DOM 节点" 相关知识
下面就会详细分解步骤怎样解析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(类名)方法相当于: 忘记交作业的同学请站起来.
这几种方法都能将人(标签) 从一个集体中筛选出来.
通过 id 获取例子中的 div 节点的方法:
document.getElementById("test1");
通过标签名获取例子中 p 节点的方法:
document.getElementsByTagName("p");
因为这个方法是获取整个 HTML 文档中的所有 p 标签, 所以结果是一个数组, 我们需要的 p 标签是 当前文档中的第一个(该 HTML 文档个中只有一个 p 标签), 所以可以这样获取:
document.getElementsByTagName("p")[0];
通过类名获取 a 标签节点:
document.getElementsByClassName("link-style");
同上, 一个 HTML 中 具有同一个 class 属性的可能不止一个标签, 所以这个方法获取的也是一个数组, 我们需要获取整个 HTML 中第一个出现的符合条件的元素:
document.getElementsByClassName("link-style")[0];
3、获取 HTML 标签的属性和内容
以 a 标签为例:
获取 a 标签的链接地址
document.getElementsByClassName("link-style")[0].href
获取 a 标签里面的内容
document.getElementsByClassName("link-style")[0].innerHTML
代码写的太长了, 我们简化一下
var link_baidu = document.getElementsByClassName("link-style")[0];console.log(link_baidu.href);console.log(link_baidu.innerHTML);console.log(link_baidu.text);
4、标签判断, 修改, 添加子节点等
事实上, 我们能够获取到这些属性和这些标签了, 就能对他们进行操作了, 无论是解析还是修改里面的内容, 结合 js 本身的 条件判断, 赋值语句即可
判断获取的标签是否为 a 标签
var link_baidu = document.getElementsByClassName("link-style")[0];
if (link_baidu.nodeName.toLowerCase() == "a"){
alert("是 超链接");
}
这里的nodeName 可以获取标签名, toLowerCase() 是将获取的标签名转换为小写字母(通常浏览器返回的是大写的)
修改a标签里面的链接文字
var link_baidu = document.getElementsByClassName("link-style")[0];
link_baidu.innerHTML = "点我跳转百度"
