03JavaScript程序设计修炼之道_2019-06-18_20-07-52_ 02-DOM fisrt学习(同前面已更新)

dom-md

## Dom
Document object model 文档对象模型
Dom树 
             html
               |
       head        body   
         |          |
      meta title   div
                    |
                    ul
                    |
                   li li li  
   在js世界中,把dom树的每个元素都看成一个对象,对象就有属性和方法                
   dom学什么  dom节点操作 查找元素 元素增删改查 样式操作 事件绑定等
## 事件
    三要素 1 事件源 谁身上发生了事件  2 事件  具体的行为 如单击、鼠标悬停、键盘按下...
          3 事件处理 事件发生后导致什么结果 
    唐三藏念紧箍咒  打开电灯
    js程序如何处理事件
##  获取页面元素
    document.getElementById("**");    
    document.getElementsByTagName("p");
    document.getElementByName()
    document.getElementByClassName()

    document.querySelector()
    document.querySelectorAll()

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>
    <script>
        var box = document.getElementById("box");
        console.dir(box);
    </script>
</body>
</html>

 

 

原文地址:https://www.cnblogs.com/HiJackykun/p/11147186.html