JS DOM屬性節點操作

操作屬性節點有兩種當時，一種是通過普通對象的方式來操作屬性節點，另外一種是通過屬性節點的方法來操作屬性節點。

1. 元素節點.屬性或元素節點[屬性]

如果我們可以把元素節點當成普通對象來處理，通過 元素節點.屬性 或 元素節點[屬性] 的方式來設置屬性。

注意：設置類 class 只能用 className

1.1 獲取屬性

var img = document.getElementsByTagName('img')[0];
var box = document.getElementsByClassName("box")[0];
var input = document.getElementsByTagName("input")[0];
// 獲取屬性節點
console.log(img.src);
console.log(box.className); // 注意：class屬性的時候使用className
console.log(input["type"]);

1.2 設置屬性

var img = document.getElementsByTagName('img')[0];
var box = document.getElementsByClassName("box")[0];
var input = document.getElementsByTagName("input")[0];

// 設置屬性值
img["src"] = "img/fengche.png";
box.className = "bigBox"; // 注意：設置class屬性的時候使用className
input.placeholder = "請輸入密碼";
input.type = "password";

2. 元素節點.方法()

2.1 getAttribute
元素節點.getAttribute(名稱) 獲取屬性值

var img = document.getElementsByTagName('img')[0];
var box = document.getElementsByClassName("box")[0];
var input = document.getElementsByTagName("input")[0];
// 獲取屬性值
var src = img.getAttribute("src");
console.log(src);
var className = box.getAttribute("class");
console.log(className);
var type = input.getAttribute("type");
console.log(type);

2.2 setAttribute
元素節點.setAttribute(屬性名，屬性值)設置屬性值或修改屬性值。

var img = document.getElementsByTagName('img')[0];
var box = document.getElementsByClassName("box")[0];
var input = document.getElementsByTagName("input")[0];
// 設置屬性值
img.setAttribute("src", "img/fengche.png");
box.setAttribute("class", "bigBox");
input.setAttribute("type", "password");

2.3 hasAttribute
元素節點. hasAttribute(屬性名)，判斷對象裏面是否包含該屬性。

var img = document.getElementById("img");
if (img.hasAttribute("class")) {
    console.log("包含class屬性");
}else {
    console.log("不包含class屬性");
}

2.4 removeAttribute
元素節點.removeAttribute(屬性名)刪除屬性。

var img = document.getElementsByTagName('img')[0];
var box = document.getElementsByClassName("box")[0];
var input = document.getElementsByTagName("input")[0];
// 刪除屬性
img.removeAttribute("title");
box.removeAttribute("class");
input.removeAttribute("type");

3. classList 屬性

語法 element.classList

Properties

length    //返回類列表中類的數量該屬性是隻讀的

方法

add(class1, class2, ...)    //在元素中添加一個或多個類名。如果指定的類名已存在，則不會添加
contains(class)    //返回布爾值，判斷指定的類名是否存在。
                   //可能值：true - 元素包已經包含了該類名false - 元素中不存在該類名
item(index)        //返回元素中索引值對應的類名。索引值從 0 開始。
                   //如果索引值在區間範圍外則返回 null
remove(class1, class2, ...)    //移除元素中一個或多個類名。注意： 移除不存在的類名，不會報錯。
toggle(class, true|false)      //在元素中切換類名。
    //第一個參數爲要在元素中移除的類名，並返回 false。
    //如果該類名不存在則會在元素中添加類名，並返回 true。

    //第二個是可選參數，是個布爾值用於設置元素是否強制添加或移除類，不管該類名是否存在。例如：

    //移除一個 class: element.classList.toggle("classToRemove", false);
    //添加一個 class: element.classList.toggle("classToAdd", true);

    //注意： Internet Explorer 或 Opera 12 及其更早版本不支持第二個參數