Introduction to DOM
The HTML DOM provides access to all elements of a JavaScript HTML document. When a web page is loaded, the browser creates a Document Object Model for the page. The HTML DOM model is constructed as a tree of objects.
HTML DOM tree
Nodes in the node tree have hierarchical relationships with each other
Terms such as parent, child, and sibling are used to describe these relationships. The parent node has child nodes. Children of the same level are called siblings (brothers or sisters).
Through the programmable object model, JavaScript has gained enough power to create dynamic HTML.
How to change the content of HTML elements (innerHTML) how to change the style of HTML elements (CSS)?
How do I react to HTML DOM events?
How do I add or remove HTML elements?
1. How to get labels
By manipulating HTML elements with JavaScript, you can find the tag using the method of the built-in object document.
Take Baidu as an example:
Pass id:
Via css selector:
2. Operation label content
1.innerHTML attribute
The easiest way to get the content of an element is to use the innerHTML attribute. The innerHTML attribute is useful for getting or replacing the contents of HTML elements.
Modify text:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="n">
<h1>666</h1>
</div>
<script type="text/javascript">
document.querySelector('#n').innerText='javascript'
</script>
</body>
</html>
Read node:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="n">
<h1>666</h1>
</div>
<script type="text/javascript">
var res = document.querySelector('#n').innerHTML
console.log(res)
</script>
</body>
</html>
It can be seen that the html tag is obtained, and the node can also be written in the form of tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="n">
<h1>666</h1>
</div>
<script type="text/javascript">
document.querySelector('#n').innerHTML = '<input />'
</script>
</body>
</html>
2.innerText property
Get text:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="n">
<h1>666</h1>
</div>
<script type="text/javascript">
var res = document.querySelector('#n').innerText
console.log(res)
</script>
</body>
</html>
The principle of modifying text is the same as innerHTML.
3. Action label properties
Get attribute value:. Attribute, [attribute]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="https://www.baidu.com"></a>
<script type="text/javascript">
var res = document.querySelector('a').href
var res1 = document.querySelector('a')['href']
console.log(res)
console.log(res1)
</script>
</body>
</html>
Modify properties:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="https://Www.baidu.com "> Website</a>
<script type="text/javascript">
document.querySelector('a').href = 'https://www.taobao.com'
</script>
</body>
</html>
4. Modify css Style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" id='user'>
<script type="text/javascript">
document.querySelector('#user').style.background = 'red'
document.querySelector('#user').style.height = '30px'
</script>
</body>
</html>
5. Event binding
onclick event: the HTML element is clicked
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button" onclick="work()">Button</button>
<script type="text/javascript">
function work(){
alert("666")
}
</script>
</body>
</html>
Clicking the button will trigger the pop-up box
Note: because the page is loaded and executed from top to bottom, an error will be reported if the javascript is executed before the element is loaded. If the javascript needs to be placed in front of the element, it needs to be placed in the function triggered by window.onload.
window.onload is executed after the page is loaded
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
var res = document.querySelector('#n').innerText
console.log(res)
}
</script>
</head>
<body>
<div id="n">
<h1>666</h1>
</div>
</body>
</html>