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 及其更早版本不支持第二个参数