Talk about null and undefined

Talk about null and undefined

• The Undefined type has only one value, which is undefined. We don't set undefined to a value, it's usually printed by us when there is an error.
• The null type is the second data type with only one value. This special value is null. The null value represents a pointer to a null object. This is why "object" is returned when the typeof operator is used to detect null.

  Scenes where undefined appears:

    1. 变量被声明了，但没有赋值时，就等于undefined。
    2. 调用函数时，应该提供的参数没有提供，该参数等于undefined。
    3. 对象没有赋值的属性，该属性的值为undefined。
    4. 函数没有返回值时，默认返回undefined。
  

  Scenes where null appears:

   1. 作为函数的参数，表示该函数的参数不是对象。
   2.  作为对象原型链的终点。
   3. 如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null而不是其他值。
   4. 将一个对象变为垃圾对象的时候，设置变量的值为null。
  

What is DOM?

1. DOM document object model.
2. It is a set of specifications specified by W3C, which stipulates how js scripts interact with HTML.
3. DOM specifies a series of standard interfaces, allowing developers to use standard methods to manipulate the structure, content, style and behavior of web pages.

What is a node? What are the node types?

1. In the pages of all content and objects are referred to as nodes.
2. The node is the most basic unit of the document, and there are many types of nodes, and constitute a complete DOM tree structure.
3. Common nodes: such as element nodes, attribute nodes, document nodes, comment nodes, text nodes, and so on.
   

Speak out how to get all the elements

1. Get by tag name is a collection: getElementsByTagName("Element name").
2. Get a single element by id: + getElementById("element name").
3. Get by class name is a collection: + getElementsByClassName("Element name").
4. selectors API: Use css selectors to select elements.
   • querySelector("Selector") single element
   • querySelectorAll("selector") a collection (nodeList object)
5. The difference between the old and the new method:
   1. The elements acquired by the new method are static.
   2. The elements acquired by the old method are dynamic.
   3. Static/Dynamic: Whether the acquired set of elements changes with the change of the node.

How to get the html body head tag

1. js provides an easy way to get html body head.
2. document.body: Get the body element.
3. documemt.head: Get the head element
4. document.documentElement: Get html element

Compatibility Get the encapsulation of the first child element

function getFirstChild(obj) {
    
    
        return obj.firstElementChild || obj.firstChild;
    }