javaScript (6): DOM operations

1. Introduction to DOM

concept

Document Object Model, document object model

Encapsulate each component of the markup language into corresponding objects:

• Document: the entire document object
• Element: element object
• Attribute: attribute object
• Text: text object
• Comment: comment object

JavaScript can operate on HTML through the DOM:

• Change the content of HTML elements
• Changing the style of HTML elements (CSS)
• React to HTML DOM events
• Add and remove HTML elements

2. DOM: Get Element object

The Element object in HTML can be obtained through the Document object, and the Document object is obtained through the window object.

Document对象中提供了以下获取Element元素对象的函数:

1. Obtain according to the id attribute value and return a single Element object

<img id="light" src="img/off.gif"> <br>
<script>
    document.getElementById("light").src = "img/on.gif";
</script>

2. Obtain according to the tag name and return an array of Element objects

<div>小林</div>   <br>
<div>不想努力了</div> <br>

<script>
    // getElementsByTagName：根据标签名称获取元素数组
    // innerHTML：表示修改标签元素中的内容
    let htmlDivElement = document.getElementsByTagName("div");
    for (let element of htmlDivElement){
    
    
        element.innerHTML = "哈哈";
    }
</script>

3. Obtain according to the name attribute value and return an array of Element objects.

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏

<script>
	let elementsByName = document.getElementsByName("hobby");
	for (let hobbyElement of elementsByName) {
    
    
    	hobbyElement.checked = true;
	}
</script>

4. Obtain according to the class attribute value and return an array of Element objects

<div class="cls">Java</div><br>
<div class="cls">PHP</div><br>

<script>
    let elementsByClassName = document.getElementsByClassName("cls");
    for (let ClassNameElement of elementsByClassName) {
    
    
        ClassNameElement.innerHTML = "嘻嘻";
    }
</script>

3. DOM: event monitoring

3.1. Event introduction

what is event

​Users can perform various operations on elements of a web page, such as click, double-click, mouse movement, etc. These operations are called events. Events are often used in conjunction with functions, so that JavaScript function execution can be driven by the occurrence of an event.

3.2. Common events

event name	illustrate
onclick	mouse click event
onblur	Element loses focus
onfocus	Element gets focus
onload	A page or image has finished loading
onsubmit	This event is triggered when the form is submitted
onkeydown	A keyboard key is pressed
onmouseover	The mouse is moved over an element
onmouseout	Move the mouse away from an element

3.3. Two ways to set events

Method 1: Named functions

Binding via event properties in tags

<button type="button" onclick="函数名()"></button>

<script>
    // 命名函数设置事件
    function abc(){
    
    
        alert("你点我了")
    }
</script>

Method 2: Anonymous function

Binding via DOM element attributes

<input type="button" id="btn">
    
<script>
    // 匿名函数设置失去焦点的事件
    document.getElementById("btn").onclick = function (){
    
    
        alert("我被点了")
    }
</script>

3.4. Incident cases

When entering the user name, it will display inputting, and when leaving, it will display please enter.

Case code

用户名: <input id="in1" name="user">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="sp1">请输入</span>

<script>
    document.getElementById("in1").onfocus = function (){
    
    
        document.getElementById("sp1").innerHTML = "正在输入"
    }

    document.getElementById("in1").onblur = function (){
    
    
        document.getElementById("sp1").innerHTML = "请输入"
    }
</script>