JS study notes-DOM

One, DOM

  1. DOM: Document Object Model
    Insert picture description here
    Insert picture description here
    2. The browser has provided us with a document node. The object is the window attribute, which can be used directly in the page. The document node represents the entire web page.
console.log(document)
//[object HTMLDocument]

3. Get the button object

<button id="btn">按钮</button>
var btn=document.getElementById("btn");

4. Modify the text of the button

//获取按钮里面的文字
console.log(btn.innerHTML);
//修改文字
btn.innerHTML="I'm a button";

Second, the event

1. Event: It is the interaction between the user and the browser, such as clicking a button, moving the mouse, and closing the window.

2. We can set some js code in the attribute corresponding to the event, so that when the event is triggered, these codes will be executed.

3. You can write js code into the onclick attribute of the label. Will the js code be executed only when we click the button? Although it can be written in the attribute of the label, they belong to the coupling of structure and behavior, which is not convenient for maintenance. Recommended Use.

<button onclick="alert('你点我干嘛!!!');">点我一下</button>

4. Bind the object to an event, this method is better to maintain

//获取按钮对象
			var btn=document.getElementById("btn");
			//可以为按钮绑定的事件绑定处理函数的形式来响应事件
			//这样当事件被触发时,其对应的函数将会被调研员
			
			//绑定一个事件
			
			btn.onclick=function(){
    
    
				alert("你还点我干嘛");
			}

5. Onclick is a function bound to this kind of click event. We call it a click response function, which is executed when the event is triggered.

Three, document loading

1. When the browser loads a page, it loads in the order from top to bottom, reading one line and loading one line.
If the script tag is written to the top of the page, when the code is executed, the page has not been loaded, and the page has not loaded the DOM object, which will cause the DOM object to be unable to be obtained.

2. Write the js code to the bottom to ensure that the js code is loaded after the page is loaded.

3. The onload event will be triggered after the entire page is loaded, bind an onload event for the window

window.onload=function(){
    
    
  alert("hello");
}

4. If you want to write the script to the upper part, you can write it in the onload event,
the response function corresponding to this event will be executed after the page is loaded,
so as to ensure that all DOM objects have been loaded when our code is executed.

window.onload=function(){
    
    
  var btn=document.getElementById("btn");
  btn.onclick=function(){
    
    
				alert("你还点我干嘛");
			}
}

Four, DOM query, get element nodes

Insert picture description here

1.getElementsByTagName()

(1) A group of element node objects can be obtained according to the tag name
(2) This method will return an array-like object to us, and all the queried elements will be encapsulated in the object.
Even if only one element is found, an array will be returned.
(3) Because it is an array-like, its length can be queried, and it can also be traversed.

2.innerHTML

(1) innerHTML is used to get the HTML code inside the element.
(2) For self-closing tags, this attribute is meaningless, such as the input tag.
(3) If you need to read the element node attributes, use the element.attribute name directly. For example: element.id, element.name
Note: the class attribute cannot be used in this way, you need to use the element.className when reading the class attribute

3.innerText

(1) This attribute can get the text content inside the element.
(2) It is similar to innerHtml, except that it will automatically remove html tags

4. Get the text node in the node

Insert picture description here

Five, query through the child nodes of the element node

Insert picture description here

1.childNodes attribute

(1) The childNodes attribute will get all nodes including text nodes.
According to the DOM, the whitespace between tags will also be defaulted as text nodes.
Note: In IE8 and below, blank text will not be treated as a child node, so this attribute will return the number of child elements that appear in IE8, while other browsers will include blank text.

(2) children attribute

You can get all the child elements of the current element. Do not include blank text.

(3) firstChild attribute

firstChild can get the first child node of the current element (including blank text node)

(4) firstElementChild attribute

The firstElementChild property can get the first child element of the current element (excluding blank text nodes).
Note: This property is not compatible with IE8 and below browsers.

Six, get the parent node and sibling node

Insert picture description here

(1) Define a function, specifically used to bind the click response function for the specified element.

Parameter: idStr is the id attribute value of the object whose click response function is to be bound.
The callback function of the fun event, when the element is clicked, the function will be triggered.

function myClick(idStr,fun){
    
    
  var btn=document.getElementById(idStr);
  btn.onclick=fun;

}
myClick("btn01",function(){
    
    
 alert ("hello");
})

(2) parentNode attribute

Returns the parent node of the current node. The return is not an array, only one.

(3) previousSibling attribute

Return the previous sibling node of the current node, or get blank text.

(3)previousElementSibling属性

Returns the previous sibling element of the current node, excluding blank text. IE8 and below are not supported.

Seven, other methods of DOM query

1. Get the body tag

var body=document.getElementsByTagName("name")[0];
//getElementsByTagName方法返回的是类数组,而一个文档里面是只有一个body标签的

There is an attribute body in the doucument, which holds a reference to the body.

var body=document.body;

2. Get the Html root tag

document.documentElement holds the root tag of html.

var html=document.documentElement;

3. All elements of document.all page

document.all can get all the elements in the page
document.getElementByTagName("*") can also get all the elements in the page.

4. Query a group of element node objects according to the class attribute value of the element

getElementsByClassName() can obtain a group of element node objects according to the class attribute, but this method does not support IE8 and below browsers.

document.getElementsByClassName("class值");

You can use document.querySelector():

document.querySelector(".box1");

5. Get all the divs in class box1

document.querySelector();
(1) A selector string is required as a parameter, and an element node object can be queried based on a CSS selector. IE8 supports this method

document.querySelector(".box1 div");

(2) Using this method will always return only one element. If there are more than one element that meets the condition, then it will only return the first one.

6.document.querySelectorAll()

The usage of document.querySelectorAll() is similar to document.querySelector(), the difference is that it encapsulates the qualified content into an array and returns it.
Even if there is only one element that meets the criteria, an array will be returned.

Guess you like

Origin blog.csdn.net/weixin_45636381/article/details/113120926