文档对象模型
1.用户定义对象 //由程序员创建的对象
2.内建对象 //内置的一些对象
3.宿主对象
节点类型
1.元素节点 //html中的标签元素
1.获取元素节点 //获取的为一个对象
1.document.getElementById('') //通过id获取
2.document.getElementsByTagNameNS('') //通过标签获取
3.document.getElementsByClassName('') //通过类名获取
2.属性节点 //标签的属性
1.获取属性节点 //获取的为对象
1.var a = document.getElementById('') //先获取元素节点
2.var b = a.attributes //获取的为一个对象 里面包含了nodeName nodeValue nodeType
3.b.nodeValue //获取属性的值(nodeValue)
2.获取元素节点属性的值 //直接获取了元素节点的nodeValue
1.
1.var a = document.getElementById('')
2.var title = a.getAttribute('title') //获取title的值
3.设置元素节点属性的值 通过id
1.
1.var a = document.getElementById('')
2.a.setAttribute('title','box')
3.文本节点 //标签包含的内容
1.获取文本节点
1.var a = document.getElementById('') //先获取元素节点
2.var b = a.childNodes //获得孩子节点
4.以上节点的三个重要属性 //均获取一个对象
var a = document.getElementById('')
1.nodeName //节点的名称
1.a.nodeName //获取标签名 ps: DIV
2.nodeValue //节点的值
1.a.nodeValue
3.nodeType //节点的类型
1.a.nodeType
5.节点对象的其他常用属性
1.var a = document.getElementById('')
1.a.childNodes
2.a.parentNode
3.a.firstChild
4.a.lastChild
6.动态的操作节点
0.获取要操作的节点
//对谁操作就获取到谁 然后用以下方式操作
1.document.getElementById()
1.创建节点 //创建一个待操作的节点
1.document.createElement()
2.插入节点 //document为执行的父节点
1.document.appendChild()
2.document.insertBefore(,)
3.删除节点 //document为执行的父节点
1.document.removeChild(子节点)
4.替换节点
1.document.replaceChild()
5.创建文本节点
1.createTextNode()
6.插入文本 //类似于插入一个子节点(文本节点)
1.对象.innerHTML = '' //(包括标签等字符串)
2对象.innerText = '' //只能是文本
7.操作样式
1.nodeObj.style 返回对象
1.对象.style.width = ''
2.先通过类设置样式 然后添加属性class
8.绑定事件 //在用户进行某种操作后 产生某种效果
1.获取到操作的节点
1.var a = document.getElementById()
2.绑定事件
1.方法1
1.function add() {
alert('事件')
this.style.
}
2.a.onclick = add;
2.方法2 // this(获取到当前操作的对象) //一般推荐如此 但若是事件重复太多则用第一种
1.a.onclick = function () {
this.style.backgroundColor = 'red'
}