JavaScript Dom 操作

JavaScript Dom 操作

文本操作

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

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

 

内容操作

---

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

---

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

---

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

---

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

input 标签            value获取当前标签中的值
select 标签         获取选中的value值(selectedIndex)
textarea 标签        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')

// 对象标签内添加指定样式
obj.style.样式 = “...”
例：obj.style.fontSize = '16px';
例：CSS： background-color、JavaScript： backgroundColor
注：样式参数在JavaScript下第一个词小写第二个词大写，中间没有“-”。

---

• // 获取所有类名
• className

---

•  // 将字符串以列表格式输出
• classList

---

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

---

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

---

 

 

标签操作

---

创建标签并添加到HTML中 

形式一：字符串方式

// 创建字符串格式的标签级属性
var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>xsk</a>"

形式二：对象方式

// 1、新建创建标签a
var tag = document.createElement('a')

// 2、新建添加内容
tag.innerText = "xsk"

// 3、新建添加class类
tag.className = "c1"

// 4、新建添加属性
tag.href = "http://www.baidu.com

修改标签

形式一：字符串方式

// 修改标签字符串内容
var obj = "<input type='text' />";

// 将标签字符串obj添加到对象标签
对象标签.insertAdjacentHTML("beforeEnd",obj);

// 将标新建p标签添加到对象标签
对象标签.insertAdjacentElement('afterBegin',document.createElement('p'))

//注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
beforeBegin ：在获取标签兄弟标签，上面第一个位置插入标签。
afterBegin ：在获取标签兄弟标签，下面正一个位置插入标签。
beforeEnd ：在获取标签内，上面第一个位置插入标签。
afterEnd ：在获取标签内，下面第一个位置插入标签。

形式二：对象方式

// 新建创建标签a
var tag = document.createElement('a')

// 将标签tag添加到对象标签
对象标签.appendChild(tag) 
对象标签.insertBefore(tag,xxx[1])