DOM操作深入

getElementById()

只有Document.prototype 上有
HTMLDocument.prototype 上没有
Element.prototype 上没有
所以所有的元素上都无法继承这个方法

getElementsByName()

只有Document.prototype 上有
HTMLDocument.prototype 上没有
Element.prototype 上没有
所以所有的元素上都无法继承这个方法

getElementByTagName getElementsByClassName querySelector querySelectorAll

这四个Document.prototype 上有
Element.prototype 也有

  <body>
    <div>
      <p>234p>
    div>
    <script>
      var div = document.getElementsByTagName('div')[0];
      var p = div.getElementsByTagName('p')[0];
      console.log(p);
    script>
  body>

在这里插入图片描述

*

获取所有标签
只能用在getElementsByTagName

  <body>
    <div>
      <p>234p>
    div>
    <script>
      var all = document.getElementsByTagName('*');
      console.log(all);
    script>
  body>

DOM操作深入_第1张图片

其他

HTMLDcoument提供了获取body 和 head的属性

  <body>
    <div>
      <p>234p>
    div>
    <script>
      var body = document.body;
      var head = document.head;
      console.log(body);
      console.log(head);
    script>
  body>

DOM操作深入_第2张图片
注意document.title
是获取title的文本的 不是获取title元素

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>哈哈哈title>
  head>
  <body>
    <div>
      <p>234p>
    div>
    <script>
      var title = document.title;
      console.log(title);
    script>
  body>
html>

在这里插入图片描述
Document提供了一个documentElement属性 可以直接访问html整个文档

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>哈哈哈title>
  head>
  <body>
    <div>
      <p>234p>
    div>
    <script>
      console.log(document.documentElement);
    script>
  body>
html>

DOM操作深入_第3张图片
总结
HTMLDocument.prototype -> body head
Document.protype -> documentElement -> HTML

你可能感兴趣的:(js,javascript,前端,html)