原生jsDom对象？看这一篇就够了

dom元素的属性操作

读操作

js对象.属性名

写操作

js对象.属性名=属性值

属性操作

dom对象.style.属性名=属性值

修改内容

dom对象.innerHTML
dom对象.innerText

样式操作

读操作

js对象.style.样式名 // 读取的是行内元素

写操作

js对象.style.样式名=样式值

js中不允许出现短划线这个符号
margin-leftmarginLeft
font-sizefontSize
-webkit-transform==WebkitTransform
js中允许把符号 . 改写成中括号

内容操作的区别

innerHTML更改内容相当于替换
write添加内容相当于累加
write 往页面添加标签会导致页面重构
innerHTML / innerText可以向任何元素添加内容
document.write( ) 只能向文档中添加内容
innerHTML会解析标签
innerTxt不会解析标签，去除参数里的空格和换行

表单方法

document.createElement('table') // 创建表格DOM

table.insertRow() // 插入行

row.insertCell() // 插入单元格

table.deleteRow(index) // 删除行

row.deleteCell(index) // 删除单元格

select-option对象的方法

op = new Option("内容","value","true,true") // 创建一个新条目
// 第一个true代表是否带有selected
// 第二个true代表是否selected = "selected"
// 必须同时为true才能默认选中

下拉选择框

select对象.add(op1,op2) 
// op1.op2必须 ，代表带op2前方添加一个op1
// op2可以取null ， 代表在select对象末尾添加一个option对象

三种动态创建元素的区别

document.write( )
innerHTML
document.createElement( '标签名' )

1 . document.write( )是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘
2 . innerHTML是将内容写入某个DOM节点，不会导致页面重绘
3 . innerHTML创建多个元素效率更高（不要拼接字符串，采用数组形式拼接），但是结构复杂
4 . createElement（）创建多个元素效率稍低，但是结构清晰

自定义属性操作

读

dom对象.getAttribute("属性名")

写

dom对象.setAttribute("属性名","属性值");

删除

removeAttribute("属性名");

修改内容

对象.textContent()

H5新增方法

对象.dateset.index // 设置索引的标准写法

js操作类

class是js的保留字,class=>className

dom对象.className="" // className添加类名，会覆盖掉原来的类名
// 单一类名

方法

dom.classList.add(类名1，类名2...)  // 添加类
// 多个类名

dom.class.List.remove(类名1，类名2) // 删除类

toggle(类名,boolean)
// boolean参数省略的情况下：该方法是一个互斥的方法，意思是如果没有，就添加，如果有，就删除
// boolean
// true 代表添加类名

// false 代表删除类名

contains(类名)
//返回boolean
//true
//代表有该类名
//false
//代表没有该类名

item(index)
// index代表类名的索引号
// 返回的是类名

js获取样式

document.getElementById(elementId).样式.属性名
// 获取行内样式的方法

 // 获取元素类样式的样式
getComputedStyle()   //全局方法
currentStyle[]      //ie专有的方法

// 封装好的方法
function getStyle( obj , attr ){
	return obj.currentStyle?obj.currentStyle[attr] :   
	document.defaultView.getComputedStyle(obj,null)[attr];
}

获取节点

获取属性节点

getAttributeNode("属性名")

兄弟节点

nextElementSibling
// 获取下一个元素节点

previousElementSibling
// 获取上一个元素节点

父节点

子节点.parentElement
获取该元素的直接父元素节点

子节点

获取子节点的类似数组的集合
父.children

属性 ： childNodes.length
注意: 这里获取的是一个集合,可通过下标值访问

firstElementChild
// 获取第一个子元素节点

lastElementChild
获取最后一个子元素节点

// 创建元素节点
document.createElement('标签名')

增加元素节点

// 增加子节点
父节点对象.appendChild(创建的元素节点名)
父节点对象.insertBefore(创建的元素节点名,已存在节点)
// 先创建，在增加

克隆元素节点

克隆对象.cloneNode(boolean)
// 默认为false 只克隆该元素
// true 克隆该元素及其子元素

删除元素节点

父节点.removeChild(子节点) 
被删除节点.remove(); // 删除自己

替换元素节点

父节点.replaceChild(新节点,被替换节点)

在补充点节点属性的知识

节点的值 nodeValue

元素节点   null
文本节点   文本的值
属性节点   属性值
注释节点	  注释的内容		

节点类型 nodeType

元素节点		1
文本节点		3		
属性节点		2	
注释节点		8

节点名称 nodeName

	元素节点		标签名
	文本节点		#text
	属性节点		undefined
	注释节点		#comment