初学DOM的知识点梳理

绪论

DOM，称为文档对象模型，可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构，常用的表示便是对XML和HTML文档的访问和修改。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。

一.查找元素

1.直接查找

    常用:
    document.getElementById()    #根据HTML文党标签中的ID获取标签对象
    document.getElementByName()    #根据name属性获取标签对象集合(列表)
    document.getElementByClassName()   #根据class属性获取标签对象集合(列表)
    document.getElementByTagName()     #根据标签名获取标签对象集合(列表)

2.间接查找

    例1:obj = document.getElementByID('i1')    #获取一个标签对象
    常用(基于例一的对象):
    obj.parentElement   //当前标签的父节点标签元素
    obj.children        //当前标签所有子标签
    obj.firstElementChild   //第一个子标签元素
    obj.lastElementChild    //最后一个子标签元素
    obj.nextElementSibling  //下一个兄弟标签元素
    obj.previousEementSibling  //上一个兄弟标签元素

操作标签

1.文本内容操作:innerText

例1:obj = document.getElementByID('i1')    #获取一个标签对象

obj.innerText     //获取标签中的文本内容
obj.innerText = 'xx'   //对标签内部文本进行重新赋值

2.class属性操作

例1:obj = document.getElementByID('i1')    #获取一个标签对象

tag.className   //直接整体做操作
tag.classList.add('样式名')   //添加指定样式
tag.classList.remove('样式名')   //删除指定样式

3.checkbox属性操作

例1:obj = document.getElementByID('i1')    #获取一个标签对象

obj.checked     //获取勾选框的值,true为选上, false为未选
obj.checked = true   //设置勾选框的值.

4.样式操作

例1:obj = document.getElementByID('i1')    #获取一个标签对象

    obj.style.fontSize = '16px'    //设置指定标签的样式
    ...

5.属性操作

例1:obj = document.getElementByID('i1')    #获取一个标签对象

obj.setAttribute('name', 'shunzi')     //为标签添加name属性,属性值为'shunzi'
obj.attributes    //获取所有标签属性
obj.getAttributes    //获取标签指定属性
obj.removeAttributes  //移除标签的指定属性

6.提交表单

例1:obj = document.getElementByID('i1')    //获取一个标签对象

document.getElementById('form').submit()   //任何标签通过DOM可以提交表单

标签操作

1.创建标签.
    方式一(对象的方式):
        var tag = document.createElement('a')   //创建a标签
        tag.innerText = 'dha'    //为a标签设置文本值
        tag.className = 'c1'     //为a标签设置指定样式
    方式二(字符串形式):
        var tag = "<a class='c1' href='http://www.cnblogs.com/wupeiqi'>wupeiqi</a>"

2.操作标签:
    例1:obj = document.getElementByID('i1')    //获取一个标签对象
    方式一:
        var tag = "<input type='text' />";
        obj.insertAdjacentHTML("beforeEnd",tag);    //在obj代表的标签的末尾加个子标签
        obj.insertAdjacentElement('afterBegin',document.createElement('p'))    //在obj代表的标签下一个位置加一个兄弟标签.

    //注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

    方式二:
        var tag = document.createElement('a')
        obj.appendChild(tag)

其他

    console.log                 输出框
    alert                       弹出框
    confirm                     确认框，返回true或false

    // URL和刷新
    location.href               获取URL
    location.href = "url"       重定向
    location.reload()           重新加载    

    setInterval                 多次定时器
    clearInterval               清除多次定时器
    setTimeout                  单次定时器
    clearTimeout                清除单次定时器

绑定事件

方式一(直接标签绑定):
    <input type='button' onclick='ClickOn(this)'>
        function ClickOn(self){
        // self 当前点击的标签
        }

方式二(先获取Dom对象,然后进行绑定,实现了JavaScript和Html的分离):
    <input type='button'>
        document.getElementById('xx').onclick = function(){
        // this 代指当前点击的标签
        }

方式三(同一次上可以执行多个相同的事件):
    例1:obj = document.getElementByID('i1')    //获取一个标签对象
    obj.addEventListener('click',function(){...},false)
    obj.addEventListener('click',function(){...},false)

    补充:false为冒泡输出,方向从子标签向父标签.true为捕捉输出,方向从父标签向子标签.