节点属性操作

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

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

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

下面分别介绍。

1、获取节点的属性值

方式 1:

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

方式 2:

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

举例:

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

2、设置修改节点的属性值

方式 1 举例:(设置节点的属性值)

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

方式 2:

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

方式 2 举例:(设置节点的属性值)

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

3、删除节点的属性

格式:

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

举例:(删除节点的属性)

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

自定义属性

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

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

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

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

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

节点内容操作

DOM 对象的属性和 HTML 的标签属性几乎是一致的。例如:srctitleclassNamehref 等。

innerHTMLinnerText 的区别

  • value:标签的 value 属性。

  • innerHTML:双闭合标签里面的内容(识别标签)。

  • innerText:双闭合标签里面的内容(不识别标签)。(老版本的火狐用 textContent

获取内容举例:

如果我们想获取 innerHTML 和 innerText 里的内容,看看会如何:(innerHTML 会获取到标签本身,而 innerText 则不会)

修改内容举例:(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 里边之前的所有内容
    // 可以动态地生成页面
};
文档更新时间: 2021-09-16 13:22   作者:张老师