02-获取DOM元素上

2019-05-03 本文已影响0人仰望_IT

<body>
  <div class="father">
      <form>
          <input type="text" name="test">
          <input type="password" name="test">
      </form>
  </div>
  <div class="father" id="box">我是div</div>
</body>

1. 通过 id 获取指定元素 (getElementById) -- 了解
- 由于id不可以重复, 所以找到了就会将找到的标签包装成一个对象返回给我们, 找不到就返回 Null
- 注意点: DOM操作返回的是一个对象, 这个对象是宿主类型的对象(浏览器提供的对象)
```
  let oDiv = document.getElementById("box");
  console.log(oDiv);  // <div class="father" id="box">我是div</div>
  console.log(typeof oDiv);   // object
```
2. 通过class名称获取 (getElementsByClassName) -- 了解
- 由于class可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
```
  let oDivs = document.getElementsByClassName("father");
  console.log(oDivs);
```
3. 通过name名称获取 (getElementsByName) -- 了解
- 由于name可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
- 注意点: getElementsByName 在不同的浏览器其中工作方式不同。在IE和Opera中， getElementsByName() 方法还会返回那些 id 为指定值的元素。
```
  let oDivs = document.getElementsByName("test");
  console.log(oDivs);
```
4. 通过标签名称获取 (getElementsByTagName) -- 了解
- 由于标签名称可以重复, 所以找到了就返回一个存储了标签对象的数组, 找不到就返回一个空数组
```
  let oDivs = document.getElementsByTagName("div");
  console.log(oDivs);
```

5. 通过选择器获取 (querySelector) -- 掌握

注意点: querySelector 只会返回根据指定选择器找到的第一个元素

  let oDiv = document.querySelector("#box");
  let oDiv = document.querySelector(".father");
  let oDiv = document.querySelector("div>form");
  console.log(oDiv);

6.通过选择器获取 (querySelectorAll) -- 掌握
- 注意点: querySelectorAll 会返回指定选择器找到的所有元素
```
  let oDivs = document.querySelectorAll("div");
  console.log(oDivs);
```

02-获取DOM元素上

1. 通过 id 获取指定元素 (getElementById) -- 了解

2. 通过class名称获取 (getElementsByClassName) -- 了解

3. 通过name名称获取 (getElementsByName) -- 了解

4. 通过标签名称获取 (getElementsByTagName) -- 了解

5. 通过选择器获取 (querySelector) -- 掌握

6.通过选择器获取 (querySelectorAll) -- 掌握

猜你喜欢

热点阅读