# 进阶 4 - DOM 对象

DOM document Object Model 文档对象模型

```javascript
// 整个html文档,会保存一个文档对象document
console.log( document ); // 获取当前文档的对象
```

### 查找标签

#### 直接查找标签

```javascript
document.getElementsByTagName("标签名")
document.getElementById("id值")
document.getElementsByClassName("类名")
//返回dom对象，就是标签对象或者数组
```

#### CSS选择器查找

```javascript
//根据css选择符来获取查找到的第一个元素，返回标签对象（dom对象）
document.querySelector("css选择器")

// 根据css选择符来获取查找到的所有元素,返回数组
document.querySelectorAll("css选择器");
```

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
​
​
<div id="i1">DIV1</div>
​
<div class="c1">DIV</div>
<div class="c1">DIV</div>
<div class="c1">DIV</div>
​
​
<div class="outer">
    <div class="c1">item</div>
</div>
​
​
<div class="c2">
    <div class="c3">
        <ul class="c4">
            <li class="c5" id="i2">111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>
</div>
​
<script>
​
   // 直接查找
   var ele = document.getElementById("i1");  // ele就是一个dom对象
   ele.innerText = 'hello bobo'; //将该标签内容修改成了hello bobo
   console.log(ele);
​
   var eles = document.getElementsByClassName("c1"); // eles是一个数组 [dom1,dom2,...]
   console.log(eles);
​
   var eles2 = document.getElementsByTagName("div"); // eles2是一个数组 [dom1,dom2,...]
   console.log(eles2);
​
  //定位outer下的c1对应的标签
   var outer = document.getElementsByClassName("outer")[0];
   var te = outer.getElementsByClassName("c1");
   console.log(te);
​
    // css选择器
    //层级定位(空格可以表示一个或多个层级)
    var dom = document.querySelector(".c2 .c3 .c5");
    console.log(":::",dom);
    //层级定位
    var doms = document.querySelectorAll("ul li");
    console.log(":::",doms);
    
</script>
​
</body>
</html>
```

### 绑定事件

#### 静态绑定 ：直接把事件写在标签元素中

```html
<div id="div" onclick="foo()">click</div>
​
<script>
    function foo(){           
        console.log("foo函数");   
    }
</script>
​
```

#### 动态绑定：在js中通过代码获取元素对象,然后给这个对象进行后续绑定

```html
<p id="i1">试一试!</p>
​
<script>
​
    var ele=document.getElementById("i1");
​
    ele.onclick=function(){
        console.log("ok");
        
    };
​
</script>
```

<br>
