Javascript Dom 操作

为什么80%的码农都做不了架构师？>>>   

查找标签

方法a、获取单个标签

doucment.getElementById('i1') 

获取 id =i1 的内容 返回一段HTML代码 如 <td id='i1'>姓名</td>

方法b、获取多个标签 ---返回nodelist，可以看伪数组对象，除了包含每个元组，还包含一些属性和方法如（length）
可以通过 console.log() 来查看里面的元素

1、document.getElementsByTagName('div')

找到div标签内容，返回1个nodelist [ <td id=1>姓名<td/>,<td>年龄<td/>，<td>性别<td/>,length]

2、document.getElementsByClassName('c1')

获取 class = c1 的内容 ,返回1个 nodelist

3、document.getElementsByName('myname')

获取 name =myname 的内容，返回1个nodelist

间接查找

parentNode          // 父节点
childNodes          // 所有子节点
firstChild          // 第一个子节点
lastChild           // 最后一个子节点
nextSibling         // 下一个兄弟节点
previousSibling     // 上一个兄弟节点
 
parentElement           // 父节点标签元素
children                // 所有子标签
firstElementChild       // 第一个子标签元素
lastElementChild        // 最后一个子标签元素
nextElementtSibling     // 下一个兄弟标签元素
previousElementSibling  // 上一个兄弟标签元素

遍历NodeList

a = document.getElementsByTagName('td')

for (a=0;i<a.length;i++){ }

注意，不要用for in 循环 ，因为nodelist 里面包含length 属性 

操作标签

tag =document.getElementById('id')

tag.innerText = 'asdasd' : 获取标签内的文本元素,并设置  ,获取DIV中的html 及其他，不能获取input

tag.innerHTML :获取标签内的 HTML 和文本内容 , ,获取DIV中的html 及其他，不能获取input

tag.value    获取或设置Input (select，textarea) 标签中的value ，获取Input

tag.seletedIndex 获取selet 标签中的序号

注意，innerText 只能设置单个文本标签的内容，如果想设置多个，必须用for 循环迭代

类名操作

tag.className    获取对应标签类的值，返回一个字符串  

tag.className ='xxx'   设置一个类

tag.classList      获取对应标签多个类的值 ，返回数组

tag.classList.add('c1')       添加类

tag.classList.remove('xx')   删除类

行内样式操作

tag.style.fontSize='16px'   给标签增加属性，小驼峰
tag.attributes  获取所有属性
tag.setAttribute   增加属性          例如：tag.setArrtibute('type','text')
tag.removeAttribule 删除属性 

创建标签，并添加到属性当中

方法1:字符串添加
 var tag ="<input type='text' />"

doucument.getElementById('xxx').inserAdjacentHTML('beforeEnd',tag)

注意：inserAdjacentHTML 里面传字符串

有四种值可用：

1.     beforeBegin: 插入到标签开始前

2.     afterBegin:插入到标签开始标记之后

3.     beforeEnd:插入到标签结束标记前

4.     afterEnd:插入到标签结束标记后

方法2:对象添加

var tag = document.createElement('input');
tag.setAttribute('type','text')
document.getElementById('i1').appendChild(tag)

appendchild() 里面传对象

checkbox 对象

checkbox对象 .checked  = true 选中 false 未选中

提交表单

通过Javascript 可对任意标签提交表单.

xxxdom.submit()

document.getElementById('form').submit()

刷新或跳转

location.href = "" 设置跳转 重定向

location.reload()

转载于:https://my.oschina.net/esdn/blog/898930