Articles and codes have been archived in [Github warehouse: https://github.com/timerring/front-end-tutorial ] or the public account [AIShareLab] can also be obtained by replying to javascript .

Article directory

introduce
- concept
Get the DOM object

introduce

Strictly speaking, most of the knowledge we learn in the JavaScript stage belongs to the knowledge system of ECMAScript. ECMAScript, referred to as ES, provides a set of language standard specifications, such as variables, data types, expressions, statements, functions and other grammatical rules. Specified by ECMAScript. The browser implements most of the ECMAScript specifications, and extends some useful functions on this basis. These extended contents are called Web APIs.

ECMAScript runs in the browser and then combined with Web APIs is the real JavaScript. The core of Web APIs is DOM and BOM.

Extended reading: The ECMAScript specification is constantly being updated, and there are many different versions. The early version numbers are numbered in numerical order, such as ECMAScript 3 and ECMAScript 5. Later, the year is used as the version number due to the faster update speed, such as ECMAScript 2017 , ECMAScript 2018 This format, ECMAScript 6 was released in 2015, often called EMCAScript 2015.

Extended reading on the history of JavaScript .

DOM (Document Object Model - Document Object Model ) is an API for rendering and interacting with arbitrary HTML or XML documents. Treat each tag element of the entire HTML document as an object, which contains many properties and methods. By manipulating these properties or calling these methods, the dynamic update of HTML can be realized, providing technical support for realizing web page special effects and user interaction .

In short, DOM is used to dynamically modify HTML, and its purpose is to develop web page effects and user interaction.

concept

DOM tree

The HTML document is displayed intuitively in a tree structure, which we call the document tree or DOM tree, and the document tree intuitively reflects the relationship between tags.

DOM node

Nodes are part of the document tree, and each node is a DOM object , mainly divided into element nodes, attribute nodes, text nodes, etc. (Each node has its corresponding series of attributes)

[Element node] is actually an HTML tag, as shown in the figure above head, , div, bodyetc. all belong to the element node.
[Attribute node] refers to the attribute in the HTML tag, such as the attribute aof the tag hrefand the attribute divof the tag in the above figure class.
[Text node] refers to the text content of the HTML tag, such as titlethe text in the tag.
[Root node] specifically refers to htmlthe label.
other…

Document

documentIt is a built-in JavaScript object specially used for DOM, which contains several properties and methods, and documentis the core of learning DOM.

<script>
  // document 是内置的对象
  // console.log(typeof document);
  // 1. 通过 document 获取根节点
  console.log(document.documentElement); // 对应 html 标签
  // 2. 通过 document 节取 body 节点
  console.log(document.body); // 对应 body 标签
  // 3. 通过 document.write 方法向网页输出内容
  document.write('Hello World!');
</script>

Get the DOM object

There must be a string in the brackets, that is, it must be quoted, and the css selector must be written inside.

querySelector ()the first element that satisfies the condition
querySelectorAll ()The collection of elements that meet the conditions returns a pseudo-array (the array has a length and an index number, but there is no array method such as pop () push ())
Learn about other ways
1. getElementById( document.getElementByIdSpecially get the element type node, idsearch according to the attribute of the tag)
2. getElementsByTagName(Get a class of elements according to the label, for example, getElementsByTagName('div')get all the divs in the page)
3. document.getElementsByClassName ( 'w ')(According to the class name to get the element to get all the class names of the page w)

<!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>Document</title>
  <style>
    .box {
      
      
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="box">123</div>
  <div class="box">abc</div>
  <p id="nav">导航栏</p>
  <ul class="nav">
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
  </ul>
  <script>
    // 1. 获取匹配的第一个元素
    // const box = document.querySelector('div')
    const box = document.querySelector('.box') // 类似类选择器
    console.log(box)
    const nav = document.querySelector('#nav') // 类似id选择器
    console.log(nav)
    nav.style.color = 'red'
    // 1. 我要获取第一个小 ulli
    const li = document.querySelector('ul li:first-child')
    console.log(li)
    // 2. 选择所有的小li
    // const lis = document.querySelectorAll('ul li')
    // console.log(lis)
    // 1.获取元素
    const lis = document.querySelectorAll('.nav li')
    // console.log(lis)
    for (let i = 0; i < lis.length; i++) {
      
      
      console.log(lis[i]) // 遍历返回的伪数组，输出每一个小li对象
    }
    const p = document.querySelectorAll('#nav')
    // console.log(p)
    // p[0].style.color = 'red'
  </script>
</body>
</html>

Any DOM object contains nodeTypea property, which is used to detect the node type.

javascript web APIs (1)