创建和删除DOM元素

*** 作DOM元素的样式：

1.通过style属性直接设置

2.通过className属性设置类选择器

3.可以通过classList属性添加多个类选择器

*** 作DOM的内容：

1.innerText属性，用于获取 和 *** 作 DOM的文本内容

2.innerHTML属性，用于获取 和 *** 作 DOM的HTML内容

创建和删除DOM元素：

createElement()方法，用于创建DOM元素

appendChild()方法，用于在当前DOM元素中添加子元素

删除元素有两种写法：

1.自删remove()方法，是元素删除自己

2.通过父级删除子级removeChild()方法，是删除元素里面指定的子元素

知识点：onclick是点击事件，on表示当，click表示点击

parenElement 和 parentNode属性，返回父级元素

鼠标事件

我们知道DOM部分其实就是浏览器各大厂商提供的一些列方法和属性的集合，这一系列的属性和方法也被称为接口，这些接口可以让我们更加方便的 *** 作HTML和XML，注意我没有说CSS哦

但我们经常会听到js *** 作css或者脚本化css的说法，那是怎么回事呢？

其实，DOM中提供的方法能 *** 作HTML的所有内容，其中包括能 *** 作元素的属性，而元素的属性中又恰好包含style属性，style属性表示的是该元素行间样式，而且行间样式的权重是1000。所以一般我们通过DOM *** 作元素的属性style就间接的改变了该元素的CSS样式。

DOM *** 作CSS样式其实质是通过DOM控制行间样式，从而达到改变样式的效果。这只能说间接的 *** 作CSS，并非真实的直接 *** 作CSS文件

通过DOM元素的style读写CSS行间样式

格式：ele.style.prop

注：

1. 可读可写行间样式，没有兼容性问题

2. 碰到保留字属性，前面应添加css；例如：float-->cssFloat

3. 复合属性必须拆解

4. 组合单词变成小驼峰式

5. 写入的值必须是字符串格式

用法比较简单，我们深入看看style吧

先随便来两个元素，并选中

我们发现，dom元素的原型的原型都是HTMLElement。于是猜测，style就是定义在HTMLElement的原型链上，所以凡是DOM元素都有style属性。

通过hasOwnProperty进一步验证看看是否就在HTMLElment的原型上

明白style定义在哪里之后，再来看style里面是什么？

目前也只有这种方式能修改CSS样式。

下面再来了解查询样式的方式：

window.getComputedStyle(ele,null)

IE使用另外一直方式代替

ele.currentStyle

最后我们封装一个所有浏览器都能用的方法：

---