原生js *** 作DOM元素的一些使用

方法一：

使用DOM.setAttribute("class","类名")

方法二：

DOM.classList.add("类名")

方法一给DOM元素添加类名会覆盖原有的类名

方法二 可以给DOM元素添加一个类名后 还可以在继续给DOM元素添加新的类名 并且不会覆盖已有的类名

概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。

使用方式：fatherdom.appendChild( insertdom )。

兼容性：所有浏览器都支持此方法。

概念：把要插入的节点添加到指定父级里面的指定节点之前。

使用方式：fatherdom.insertBefore( insertdom，chosendom )。

兼容性：所有浏览器都支持此方法，但是值得注意的是，如果第二个参数节点不存在，在IE和Safari下会把要添加的节点使用appendChild()方法追加到指定父级中，而其他主流浏览器（Firefox、Chrome、Opera等）下会报错，所以在插入节点的时候，需要先判断第二个参数节点是否存在

效果

注意：很多人都认为设置disabled="true"是为启用，设置为“false”时为禁用，这是错的。

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。

2、在index.html中的<script>标签，输入js代码：$('#a').before('<div>789</div>')。

3、浏览器运行index.html页面，此时在div标签“123”的最前面成功插入了新的元素“789”。

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）.自定义属性

---