4. 节点属性操作

1. 节点属性操作

我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。(其实就是对象属性的操作)

我们就统一拿下面这个标签来举例：

<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1" />

下面分别介绍。

1.1 获取节点的属性值

方式 1：

元素节点.属性;
元素节点[属性];

方式 2：

元素节点.getAttribute("属性名称");

举例：

console.log(myNode.getAttribute("src"));
console.log(myNode.getAttribute("class")); //注意是class，不是className
console.log(myNode.getAttribute("title"));

1.2 设置修改节点的属性值

方式 1 举例：（设置节点的属性值）

myNode.src = "images/2.jpg"; //修改src的属性值
myNode.className = "image2-box"; //修改class的name

方式 2：

元素节点.setAttribute(属性名, 新的属性值);

方式 2 举例：（设置节点的属性值）

myNode.setAttribute("src", "images/3.jpg");
myNode.setAttribute("class", "image3-box");
myNode.setAttribute("id", "你好");

1.3 删除节点的属性

格式：

元素节点.removeAttribute(属性名);

举例：（删除节点的属性）

myNode.removeAttribute("class");
myNode.removeAttribute("id");

2. 自定义属性

在 HTML5 中我们可以自定义属性，其格式如下 data-*=""，例如:

data-info="我是自定义属性"，通过Node.dataset['info'] 我们便可以获取到自定义的属性值。

Node.dataset是以类对象形式存在的

当我们如下格式设置时，则需要以小驼峰格式才能正确获取

data-my-name="mm"，获取Node.dataset['myName']

3. 节点内容操作

DOM 对象的属性和 HTML 的标签属性几乎是一致的。例如：src、title、className、href 等。

innerHTML 和 innerText 的区别

• value：标签的 value 属性。

• innerHTML：双闭合标签里面的内容（识别标签）。

• innerText：双闭合标签里面的内容（不识别标签）。（老版本的火狐用 textContent）

3.1 获取节点内容

如果我们想获取 innerHTML 和 innerText 里的内容，看看会如何：（innerHTML 会获取到标签本身，而 innerText 则不会）

3.2 修改节点内容:（innerHTML 会修改标签本身，而 innerText 则不会）

btn.onclick = function() {
    // inputEl.value = '不凡学院';
    // 修改表单的值
    inputEl.value = Math.floor(Math.random() * 10);
};

btn2.onclick = function() {
    // 插入文本内容
    boxEl.innerText = "今天天气很热";
    boxEl.innerText = "<p></p>"; // 当做了文本处理,并没有解析成标签
    // 每一次innerText 都会替换掉box里边  之前的所有内容
};

btn3.onclick = function() {
    boxEl.innerHTML = "<p>我是一个p标签</p>";
    //解析成了  标签
    // 每一次innerHTML 都会 替换掉 掉 box 里边之前的所有内容
    // 可以动态地生成页面
};

innerText和innerHTML的区别: innerText不会识别html，而innerHTML会识别。