js DOM *** 作

1）一共12个节点类型

2）dom *** 作就是对节点进行 *** 作

3）节点的类型的获取方法notetype

4）ie9以上及chrome safari firefox 会将换行符当成节点

（1）静态获取

（2）返回带有指定ID的元素

var box1=document.getElementById('box')

（1）根据标签名获取

（2）得到的是个数组

var div1=document.getElementsByTagName('div')[0]

（1）根据类名获取元素

（2）动态获取

（3）得到的是一个数组

var box=document.getElementsByClassName('box')[0]

（1）返回符合要求第一个元素

（2）通过css选择器来获取指定标签

（3）静态获取

（1）返回所有匹配元素

（2）根据css选择器来获取所有标签

（3）得到的是一个数组

获取兄弟节点

获取下一个兄弟标签

获取上一个兄弟节点

获取上一个兄弟标签

获取最后一个子节点

获取最后一个子标签

获取所有非标签类型的子节点

获取所有子标签节点

获取父节点

增加节点

var div=document.createElement('div')

在父元素的末尾，插入节点

在添加元素前，需要将元素先创建好

div.appendChild(div)

修改指定子节点

删除指定子节点

在删除前需要先获取到被删除元素

div.removeChild(box)

删除当前节点

需要先获取到被删除的节点

div.remove()

（1）设置ID

div.id='box'

（2）设置class

div.className='box'

（3）设置style

div.style.width='10px'

（4）设置图片路径

img.src='../'

（5）.自定义属性

楼下说得太简单了，估计提问者看不懂。

假设，你有以下DOM

<div id="dvTest">

    <div>在这下面加一个按钮</div>

</div>

然后你添加一个按钮，方法如下

function addButton(){

    var $container = $("#dvTest")

    $container.append("<a href='javascript:'>click me</a>")

}

然后，给刚加的按钮一个click事件

//你要先找到你加的这个按钮

$("#dvTest > a").click(function(){ alert('you clicked me') })

//或

$("#dvTest > a").unbind().on('click'), function(){ alert('you clicked me') })

我觉得你主要是jQuery的筛选器用得不够熟。你可以搜一下，大概看看。只要能找到控件，绑定事件都不叫事儿。

//1、首先获取div的父节点

//2、创建一个新节点

//3、将新节点添加到div节点后面

//具体 *** 作如下：

var divs = document.getElementsByTagName("DIV")//获取页面中所有div

for(var i=0 i<divs.length i++) {  

    var div = divs[i]//获取第i个div

    var divParent = div.parentNode//获取该div的父节点

    var newNode = document.createTextNode("文本节点")//创建文本节点

    var next = div.nextSibling//获取div的下一个兄弟节点

    //判断兄弟节点是否存在

    if(next) {

        //存在则将新节点插入到div的下一个兄弟节点之前，即div之后

        divParent.insertBefore(newNode,next)

    } else {

        //不存在则直接添加到最后,appendChild默认添加到divParent的最后

        divParent.appendChild(newNode)

    }

}

//以下是一些常用js *** 作

var textNode = document.createTextNode("xxx")//创建文本节点

var elementNode = document.createElement("p")//创建元素节点(p)

var body = document.getElementsByTagName("body")[0]//获取body节点

body.appendChild(elementNode)//元素节点添加到body节点下，添加在末尾

elementNode.appendChild(textNode)//将文件节点添加到元素节点下

//获取要删除的节点，elementNode.length-1 表示最后一个指定节点(这里表示最后一个p节点)

var delElementNode = elementNode.item(elementNode.length-1)

body.removeChild(delElementNode)；//移除指定节点

body.insertBefore(newNode, oldNode)//在body中的oldNode前插入newNode节点

body.replaceChild(newNode, oldNode)//将body中的oldNode替换为newNode节点

//创建一个新的属性

var style = document.createAttribute("style")

//为节点添加新属性

option.attributes.setNamedItem(style)

//设置新属性的值

option.setAttribute("style","color:red")

---