JavaScript is divided into three parts: ECMAScript (JS language itself basic syntax), DOM (Document Object Model, application programming interface), BOM (Browser Object Model).
1. DOM basics
On a web page, the objects that organize the page (or document) are organized in a tree structure, and the standard model used to represent the objects in the document is called the DOM.
(1) DOM search method
dom has two search methods: document.getElementById(), document.getElementsByTagName()
1.document.getElementById() Find by id attribute
<div id="div1"><p>测试</p></div>
<script>
var div = document.getElementById("div1");
console.log(div); //The return value is: <div id="div1"><p>Test</p></div>
</script>
2.document.getElementsByTagName() Find by tag name
Function: Returns a collection of references to all tags
Return value: array
Description: tag is the name of the tag to be obtained
<div><p>测试1</p></div>
<div><p>测试2</p></div>
<div><p>测试3</p></div>
<div><p>测试4</p></div>
<script>
var divs = document.getElementsByTagName("div"); //will get an array collection, even if there is only one element, it is in the form of an array
console.log(divs[0]); //Access the form of the subscript of the individual element array <div><p>Test 1</p></div>
</script>
(2) Set the relevant attributes of the element
1.style attribute element style attribute
Function: Set the CSS style of the element.
Description: (1) ele is the dom object to be styled
(2) styleName is the name of the style to be set (the style in CSS is font-size, which is written as fontSize here)
(3) styleValue is the style value to be set
<div><p>测试1</p></div>
<div><p>测试2</p></div>
<div><p>测试3</p></div>
<div><p>测试4</p></div>
<script>
var divs = document.getElementsByTagName("div");
divs[0].style.backgroundColor = "red";
</script>
The result is:
2.innerHTML property returns (sets) the HTML between the start and end tags of ele
(1) Get
Function: Returns the HTML between the opening and closing tags of the ele element.
<div id="div1"><p>测试1</p></div>
<div><p>测试2</p></div>
<div><p>测试3</p></div>
<div><p>测试4</p></div>
<script>
var div1=document.getElementById("div1");
console.log(div1.innerHTML); //return value <p>Test 1</p>
</script>
(2) Setting
Syntax: ele.innerHTML = "html";
Function: Set the HTML content between the start and end tags of the ele element to html.
<div id="div1"><p>测试1</p></div>
<div><p>测试2</p></div>
<div><p>测试3</p></div>
<div><p>测试4</p></div>
<script>
var div1=document.getElementById("div1");
div1.innerHTML = "<span>replace the previous content</span>";
console.log(div1.innerHTML); //return value <span>replace the previous content</span>
</script>
3.className attribute Set (return) the class attribute of the element
(1) Get
Syntax: ele.className
Function: Returns the class attribute of the ele element
<div id="div1" class="red"><p>测试1</p></div>
<div><p>测试2</p></div>
<script>
var div1=document.getElementById("div1");
console.log(div1.className); //return value red
</script>
(2) Setting
Syntax: ele.className = "cls";
Function: Set the class attribute of the ele element to cls
<div id="div1" class="red"><p>测试1</p></div>
<div><p>测试2</p></div>
<script>
var div1=document.getElementById("div1");
div1.className = "greem";
console.log(div1.className); //The return value is green
</script>
and
4.getAttribute() Get the value of the attributes of the ele element (including custom attributes)
Function: Get the value of the attribute attribute of the ele element (including custom attributes)
illustrate:
(1) ele is the dom object to be manipulated
(2) attribute is the html attribute to be obtained
<div id="div1" class="red" data-name="poorpenguin"><p>Test 1</p></div> <!--The custom html attribute is best to be data-XXX kind of writing -->
<div><p>测试2</p></div>
<script>
var div1=document.getElementById("div1");
console.log(div1.getAttribute("class")); //return value red
console.log(div1.getAttribute("data-name")); //return value poorpenguin
</script>
5.setAttribute() Set the attributes of the ele element (including custom attributes)
Function: Set attributes on the ele element
illustrate:
(1) ele is the dom object to be manipulated
(2) attribute is the attribute name to be set
(3) value is the value of the attribute attribute set
<div id="div1" class="red" data-name="poorpenguin"><p>测试1</p></div>
<div><p>测试2</p></div>
<script>
var div1=document.getElementById("div1");
div1.setAttribute("data-type","test")
console.log(div1.getAttribute("data-type")); //return value test
</script>
6.removeAttribute("attribute") delete the attribute attribute on ele
Function: delete the attribute attribute on ele
illustrate:
(1) attribute is the name of the attribute to delete (can be id, class or custom) can be used to eliminate styles
(2) ele is the dom object to be manipulated
2. DOM events
(1) HTML events
Add events directly within HTML element tags to execute scripts.
Basic syntax: <tag event="execute script"></tag>
Function: Bind events on HTML elements
Description: Executing a script can be a function call.
(2) DOM0 level events
Unlike HTML events, DOM0 events get dom elements in js and bind events to the dom elements
Syntax: ele.event=execute script
Function: Bind events on DOM objects
Description: The execution script can be an anonymous function or a function call.
for example:
<button id="btn1">按钮1</button> <button id="btn2">按钮2</button> <button id="btn3">按钮3</button> <script type="text/javascript"> var btnEle1 = document.getElementById("btn1"); var btnEle2 = document.getElementById("btn2"); var btnEle3 = document.getElementById("btn3"); btnEle1.onclick=fn1; //Bind a function call function fn1(){ alert("test"); }; var fn2 = function(){ alert("test"); } btnEle2.onclick=fn2; btnEle3.onclick=function(){ alert("Test"); } </script>
ps: Note, do not add () after the binding function name
(3) Mouse events
| event name | Definition and Usage | grammar | Notes |
| onclick | Occurs when an object is clicked | ele.onclick="JS code" | |
| onmouseover | Occurs when the mouse moves over an object | ele.onmouseover="JS code" | |
| onmouseout | Occurs when the mouse moves out of the object | ele.onmouseout="JS code" | |
| onmouseup | Occurs when the mouse button is released | ele.onmouseup="JS code" | |
| onmousemove | Occurs when the mouse moves over an object | ele.onmouemove="JS code" | |
| onmousedown | occurs when the mouse button is pressed | ele.onmousedown="JS code" | |
| onload | Executed as soon as the page element is loaded | window.onload=function(){"JS代码"} |
|
| onblur | Occurs when an object loses focus | ele.onblur="JS code" | |
| onfocus | Occurs when an object gains focus | ele.onfocus="JS code" | |
| onchange | Occurs when the content of the field changes | .. | Mainly used in the <select> tag |
| onsubmit | Fired when the confirm button in the form is clicked | ele (form dom element).onsubmit="JS code" | Mainly used in the <form> tag |
| onresize | Occurs when the browser window is resized | window.onresize="JS code" | Mainly used on windows |
| onscroll | Triggered when the scrollbar is dragged (can be a browser or a dom element) | onscroll="JS code" |
(4) Keyboard events
| event name | Definition and Usage | grammar | Notes |
| onkeydown | The event occurs when the user presses a keyboard key | document.onkeydown="JS code" | |
| onkeypress | The event occurs when a keyboard key is pressed and a key is released | document.onkeypress="JS code" | |
| onkeyup | The event occurs when the keyboard key is released | document.onkeyup="JS code" | |
| keyCode | Get the character code of the pressed keyboard key | event.keyCode | Returns the character code of the key triggered by the keyboard event, used with the keyboard event |
Example: Judging the maximum number of characters entered
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Enter text</title>
</head>
<body>
<p>The character limit is 30 characters, <span>You can also enter <b>30</b> characters</span></p>
<textarea cols="50" rows="7" id="text"></textarea>
<script type="text/javascript">
var span = document.getElementsByTagName('span')[0];
var text = document.getElementById('text');
document.onkeyup = function(){
var count = 30 - text.value.length;
if(count>=0){
span.innerHTML = "您还可以输入<b>"+count+"</b>字";
}
else{
count = Math.abs(count);
span.innerHTML = "您已超出<b>"+count+"</b>字";
}
}
</script>
</body>
</html>
（五）鼠标事件的相关例子
1.onchange事件在<select>中的应用以及<option>元素的获取方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>onchange()</title>
<style type="text/css">
#div{
width:300px;
height:300px;
border:2px solid gray;
margin:100px 0 0 200px;
}
</style>
<script type="text/javascript">
window.onload=function(){ //dom文档加载完成后再执行
var selectEle = document.getElementById("color");
var divEle = document.getElementById("div");
selectEle.onchange=changeBackgroundColor;
// 改变div背景颜色
function changeBackgroundColor(){
var optionEle = this.options[this.selectedIndex]; //只有这种方式才能取到option中的文本,this.value只能获取当前选取的值而不是option元素
if(optionEle.value == 0){
divEle.style.background = "#FFF";
divEle.innerHTML = "我没有任何变化";
}else{
divEle.style.background = optionEle.value;
divEle.innerHTML = "我的背景颜色变成了"+optionEle.value+optionEle.innerHTML;
}
}
}
</script>
</head>
<body>
<div>
<span>请选择您喜欢的颜色:</span>
<select id="color">
<option value="0">请选择</option>
<option value="yellow">黄色</option>
<option value="orange">橘色</option>
<option value="pink">粉色</option>
<option value="purple">紫色</option>
</select>
</div>
<div id="div">我是div</div>
</body>
</html>