js怎么解析html标签

今天小编介绍一下js如何解析html标签

JavaScript 与 HTML 最简单转化

1. 1

   JS 与 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. 1

   节点树 与 DOM

   上面提到的 JavaScript  与 HTML 之间的 "沟通" 很暴力并且无法应对复杂的环境. 但其实 浏览器端的JavaScript 自己是自带了方式解析HTML的, 也就是我们耳熟能详的 DOM

   DOM 是将HTML 翻译当作了对象(object), 然后js 经由过程对 对象的操作来操作HTML, 可以或许解析HTML, 可以或许改变HTML.

   因为HTML自己的标签是可以嵌套的, 即标签里面套着标签, 所以JS 中将其形象的称为 节点树.  可以将每个节点理解为一个标签, 当前除了标签不测空白和文字也算是节点.(因为HTML里面除了标签也是有内容的啊)

   节点的精确界说(W3C尺度)

   整个文档是一个文档节点

   每个 HTML 元素是元素节点

   HTML 元素内的文本是文本节点

   每个 HTML 属性是属性节点

   注释是注释节点

   这里的HTML 元素 年夜致可以理解为标签

2. 2

   JavaScript 节点 与 HTML 标签

   看到之前介绍的节点的界说, 那么我们就能理解 HTML 的一个标签 是 JS 中的一个节点, 且 标签的属性, 内容 属于这个标签, 也就是JS中该标签节点的子节点. 

   那么不难看出, 若是我们想要 经由过程 JS 解析 HTML 标签 就是 获取到我们的方针节点, 拿来用就可以了. 道理讲解到这里, 想要领会想起的同窗可以自行搜刮 "DOM 节点" 相关常识

   下面就会具体分化步调如何解析HTML 标签

JavaScript 解析 HTML 标签具体步调

1. 1

   如下图例, 是一个HTML 文档, 里面有一个div 标签, div标签里面有个段落, 段落里面是一个超链接(a 标签)

   我们就用这个文档来示例 JavaScript 如何解析 HTML

   这里面用到的 console.log() 是在节制台输出成果 (一般浏览器按F12 然后点击 console/节制台 项, 就能看到输出成果, 详情自行百度 "console.log()" )

   
2. 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. 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. 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 = "点我跳转百度"