JavaScript Dom 操作

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')
// 对象标签内添加指定样式
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])

 

posted @ 2019-02-22 11:36  kevin.Xiang  阅读(129)  评论(0编辑  收藏  举报