JavaScript Dom 操作

Posted 2021-02-10 项思凯

javascript Dom 操作

文本操作

// 获取标签中的文本内容
标签.innerText

// 对标签内部文本进行重新赋值
标签.innerText = “”

 

内容操作

---

• // 获取当前文本内容、仅文本
• innerText

---

• // 设置或获取对象及其内容的 html 形式
• outerText 

---

• // 获取当前文本内容、包含标签全不内容
• innerHTML 

---

• // 获取当前标签中的值可进行修改
• value

input 标签            value获取当前标签中的值
select 标签         获取选中的value值(selectedIndex)
textarea 标签        value获取当前标签中的值

value

---

 

属性操作

var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById(‘n1‘).setAttributeNode(atr);

---

• // 获取所有标签属性
• attributes

---

• // 设置标签属性
• setAttribute(key,value)

---

• // 获取指定标签属性
• getAttribute(key)

---

 

class 操作

指定单个元素 　　　　　　  tag = document.getElementById(‘i1‘)
整体做操作新增class值 　  tag.className = ‘c1‘;
输出为列表形式 　　　　    tag.classList
添加class第二个值 　　　  tag.classList.add(‘c2‘)
删除class指定类名 　　　  tag.classList.remove(‘c3‘)

---

• // 获取所有类名
• className

---

• // 删除指定类
• classList.remove(cls)

---

• // 添加类
• classList.add(cls)

---