一、简单了解DOM
DOM(document object mode 文档对象模型)，通过HTML DOM，JavaScrip能够访问和改变HTML文档的所有元素.
那么，DOM能干啥呢？借助DOM，JavaScript能 （增删改查） 1、改变页面中的所有的Html元素，Html属性和css样式。 2、删除页面中的所有的Html元素、Html属性。3、能添加新的Html元素，Html属性。4、对页面中所有已有的HTML事件作出反应。5、能在页面中创建新的HTML事件。
二、HTML DOM方法
DOM方法是您能够在HTML上执行的操作。下面例子 改变 id = “demo”的
元素的属性.
说明：在此，getElementById( )是方法，通过使用元素的id名 来访问Html元素； innerHTML 是属性，用于获取或替换 HTML元素的内容。
innerHTML(获取所访问元素内的标签以及内容) 和 innerText（只获取到所访问html元素内的内容）) 的区别；
hello word
注意：文档对象代表您的网页，如果你希望访问HTML页面中的任何元素，那么总是从访问document对象开始，
1、获取HTML元素：
document.getElementById( ‘ id名’ )
document.getElementTagName( ‘ 标签名’ )
document.getElementClassName( ‘ 类名’ )
document.querySelector( ‘ #id / .class /标签名 ‘ )
document.querySelectorAll( ‘ #id / .class /标签名 ‘ )
通过 Html 对象选择器来查找 html对象？？？？？？？？？？？？？？？？？？？
2、常用的DOM方法：
document.createElement(element) //创建HTML元素
document.removeChild(element) //删除HTML元素
document.appendChild(element) //添加html元素
document.replaceChild (element) //替换html元素
document.write(text) //写入html输出流
3、添加事件处理程序：
document.getElementById( ‘id’ ).onclick = function(){ }
4、DOM实现“改”
4-1 改变html输出流 : HTML DOM 允许javaScript改变HTML的内容， 在JavaScript中，document.write( ) 可用来直接写入 HTML输出流。即： 创建HTML内容注意：千万不要在文档加载后使用 document.write( ) ，，这么做会覆盖文档。
例：
4-2 改变HTML内容 document.getElementById(id).innerHTML = new text;
4-3 改变属性的值 document.getElementById(id).属性 = new value;
例：
5、JavaScript HTML DOM 改变css
document.getElementById(id).style.property = new style; //property使用驼峰命名来调用<br />例： <body><br /> <p id="colorstyle">dom改变样式</p><br /> <script><br /> document.getElementById('colorstyle').style.color = "red";<br /></script><br /> </body>
6、使用事件
当“某些事情”在HTML元素上发生时，浏览器会生成事件： 点击某个元素时
页面加载时
输入字段被更改时
上面例子也可：
dom改变样式
//注意： 下面这段代码是写在 body中，而不是
改进：
四、事件对象
1、event 对象: 每个事件被触发时,都会产生一个event对象
2 、target 和 currentTarget
○ target表示被触发的元素(比如: 点击事件就是被点击的元素)
○ currentTarget是事件绑定的元素
五、事件监听器
1、事件监听器 addEventListener ( ) 方法
element.addEventListener ( event,function,useCapture) <br /> 第一个参数：事件类型(如： "click" 或 "onmousedown"等)<br /> 第二个参数： 当事件发生时我们需要调用的函数。<br /> 第三个参数是 布尔值，指定事件传播方法 是 事件冒泡（false）还是事件捕获(true)<br /> 注意：请勿对事件使用“on”前缀，请使用 "click"来代替 "onclick"<br /> document.getElementById( 'myButton' ).addEventListener(' click', ' displatDate');
2、向元素添加事件处理程序
{alert(“hello word”);})；
也可以引用外部“命名”函数：
element.addEvenListener( ‘click’,myFunction( ))；
function myFunction( ){
alert(“hello word”);
}
3、给相同的元素添加不同类型的事件
element.addEvenListener( ‘click’, myFunctionxx）；
element.addEvenListener( ‘click’, myFunctionyy）；
4、在同一元素上添加许多不同的事件
element.addEvenListener( ‘click’, myFunctionxx）；
element.addEvenListener( ‘mouseover’, myFunctionyy）；
element.addEvenListener( ‘mouseout’, myFunctionzz）；
5、向windows对象添加事件处理程序
window,addEventListener(‘resize’,function( ){
document.getElementById(“demo”).innerHTML = sometext;
} );
6、事件冒泡和事件捕获
在HTML DOM 中有两种事件传播的方法： 事件冒泡 和 事件捕获
冒泡: 最内侧元素的事件会首先被处理，然后是更外侧的： 首先处理
元素的点击事件，然后是
捕获：最外侧元素的事件首先被处理，然后是更内侧的： 首先处理
元素的点击事件.
事件冒泡
逆流UIUI尽力碧波拉你不怕
这是原本的段落1
这是原本的段落2
#### 2、删除已有的HTML元素
这是原本的段落1
这是原本的段落2
var parent = document.getElementById(‘div1’);
var child = document.getElementById(‘p1’);
parent.removeChild(child); 找父节点： var child = document.getElementById(‘p1’);
child.parentNode.removeChild(child); #### 3、替换HTML元素 parent.replaceChild(新元素, 旧元素);
例如：
这是原本的段落1
这是原本的段落2
典型案例:to-do-list添加、删除
<!DOCTYPE html>
若有收获，就点个赞吧
0 人点赞
