js DOM对象

文档对象模型

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'
    }