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

Posted hijackykun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

 

 

 

 

以上是关于03JavaScript程序设计修炼之道_2019-06-18_20-07-52_ 02-DOM fisrt学习(同前面已更新)的主要内容，如果未能解决你的问题，请参考以下文章

03JavaScript程序设计修炼之道_2019-07-07_14-33-54 BOM

03JavaScript程序设计修炼之道 2019-06-23_15-50-11 验证码

03JavaScript程序设计修炼之道 2019-06-27_20-04-17 节点元素操作：复制

03JavaScript程序设计修炼之道 2019-05-23_20-28-51_2019-05-26_21-12-07 for练习hw

03JavaScript程序设计修炼之道 2019-06-25_20-34-21-2019-06-25_20-44-06 节点元素的操作：增删改

03JavaScript程序设计修炼之道_2019-07-02_20-11-09_ 2019-07-02_21-28-28 常用事件(onkeydown...)offsetclientscro