如何使用 Javascript 訪問使用 Legacy Dom 和 W3C Dom 的 HTML 文檔中的一組超鏈接？

Question

例如我有一個鏈接數組：

var links = [
    <a href="One.com" id="one"></a>,
    <a href="Two.com" id="two"></a>,
    <a href="Three.com" id="three"></a>,
];

//W3S Dom
document.getElementById("one");

//Legacy DOM
document.getElementByTagName("a")

我使用 W3C DOM 方法和傳統 DOM 訪問鏈接的方式是否正確？

然后如何繼續創建一個 for 循環以使用兩種不同的方法訪問數組？

Answer 1

這是一個帶有示例的小片段：

 // Use string in you want an array of HTML element var linksArray = [ '<a href="One.com" id="one"></a>', '<a href="Two.com" id="two"></a>', '<a href="Three.com" id="three"></a>', ]; console.log(linksArray[0]); // You can use object if you want specific key to call element var linksObj = { 'one' : '<a href="One.com" id="one"></a>', 'two' : '<a href="Two.com" id="two"></a>', 'three': '<a href="Three.com" id="three"></a>', }; console.log(linksObj.one); // If you want to get un element by id, you need him to be in your DOM before var one = document.getElementById("one"); console.log(one); // If you want to get element by tag name, you can do something like this to get an HTML collection of your "<a>" elements : var element = document.getElementById("div"); var tag = element.getElementsByTagName("a"); console.log(tag);

 <div id="div"> <a href="One.com" id="one"></a> <a href="Two.com" id="two"></a>, <a href="Three.com" id="three"></a> </div>

getElementsByTagName的文檔： https ://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

希望能幫助到你 ！