JS中的DOM属性节点操作

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");