js怎麼解析html標簽

今天小編介紹一下js如何解析html標簽

JavaScript 與 HTML 最簡單轉化

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
節點樹與 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 標簽

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(類名)方式半斤八兩於: 健忘交功課的同窗請站起來.
這幾種方式都能將人(標簽) 從一個集體中篩選出來.
經由過程 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 = "點我跳轉百度"