基本操作

  1. 如何改变 HTML 元素的内容 (innerHTML)
    document.getElementById("p1").innerHTML="新文s本!";
  2. 如何改变 HTML 元素的样式 (CSS)
    document.getElementById('id1').style.color='red';

  3. 如何对 HTML DOM 事件作出反应 

    1. <button onclick="displayDate()">点这里</button>
    2. <script>
    3. function displayDate(){
    4. document.getElementById("demo").innerHTML=Date();
    5. }
    6. document.getElementById("myBtn").addEventListener("click", displayDate);
    7. </script>

  4. 如何添加或删除 HTML 元素

  • 创建： ```javascript var para=document.createElement(“p”);

var node=document.createTextNode(“这是一个新段落。”);

para.appendChild(node);

  2. - 追加：
  3. ```javascript
  4. var element=document.getElementById("div1");
  6. element.appendChild(para);
  • 删除： ```javascript var parent=document.getElementById(“div1”);

var child=document.getElementById(“p1”);

parent.removeChild(child);

  2. 5. DOM操作一个元素的style
  3. ```javascript
  4. var oo = document.getElementById("leo");
  6. oo.style.display='inline-block';
  8. oo.style.border='1px solid red';
  1. DOM操作元素的属性 ```javascript oo.attributes//获取element所有属性

oo.setAttribute(‘leo’,’taishuail’);//设置leo属性

oo.getAttribute(‘leo’);//获取leo属性

oo.hasAttribute(‘leo’);//判断有没有leo属性

oo.removeAttribute(‘leo’);//移除leo属性

  2. <a name="m2D2p"></a>
  3. ## 事件系统
  4. 事件是DOM中一个很有用的模型，但是被现代框架封装之后，一般的开发人员可能很少直接接触到。事件是一种异步编程的实现，是程序各个组成部分之间的一种通信方式，也是系统解耦的一种不错的方式。
  6. DOM的事件操作（监听和触发），都定义在EventTarget接口。Element节点、document节点和window对象，都实现了这个接口。此外，XMLHttpRequest、AudioNode、AudioContext等浏览器内置对象，也部署了这个接口。<br />该接口有三个方法。

addEventListener：绑定事件的监听函数 removeEventListener：移除事件的监听函数 dispatchEvent：触发事件

  2. 废话不说，直接上代码：
  3. ```javascript
  4. var test = new Event('test') //自定义test事件
  5. var html = document.querySelector("html") //获取html和body元素
  6. var body = document.querySelector("body")
  8. html.addEventListener('test',()=>{console.log('test html')},true) //在html，body元素上都绑定test事件,并且设置为true
  9. body.addEventListener('test',()=>{console.log('test body')},true)
  11. // html.dispatchEvent(test)
  12. body.dispatchEvent(test)

运行之后，body dispatch事件，由于事件冒泡，会触发body和html绑定的时间
html dispatch，不会触发body绑定的事件
至此，自定义事件也就实现完毕