Get elements
| document.getElementById('parameter '); |
Get id element |
|---|---|
| console.dir(time)； |
Print element objects |
| document.getElementsByTagName('tagname '); |
Get elements with tags |
| var nav = document.getElementById('id name '); var nav1 = nav.getElementsByTagName('tagname '); |
You can get some labels in the element |
| document.getElementsByClassName ('class name '); |
Returns a collection of element objects based on the class name |
| document.querySelector ('selector ') |
Returns the first element object based on the specified selector |
| document.querySelectorAll ('selector ') |
Returns all according to the specified selector |
| document.body |
Return body element object |
| document.documentElement |
Return html element object |
Event base
Three elements of the event
1.Event source 2.Event type Three.Event handler <button id="btn">Event</button> <script> // (1) Event source event triggered object who button var btn = document.getElementById('btn'); // (2) How event types trigger events such as onclick or mouse passing // (3) The event handler is completed by a function assignment btn.onclick = function() { alert('Clicked'); } </script>
Mouse event
| onclick |
Left click to trigger |
| onmouseover |
Mouse over trigger |
| onmouseout |
Mouse off trigger |
| onfocus |
Get mouse focus trigger |
| onblur |
Lose mouse focus trigger |
| onmousemove |
Mouse movement trigger |
| onmouseup |
Mouse pop up trigger |
| onmousedown |
Mouse down trigger |
Operational elements
Change element content
element.innerText: spaces and line breaks will not be preserved
<button>Key</button> <div>Heel change</div> <script> var btn = document.querySelector('button'); var div = document.querySelector('div'); btn.onclick = function() { div.innerText = 'Replacement content'; } </script>
element.innerHtml: spaces and line breaks will be reserved
<p> <strong>content</strong> Written words </p> <script> var ven = document.querySelector('p'); console.log(ven.innerText); console.log(ven.innerHTML); </script>
Modify element properties
<button id="tp1">Picture 1</button> <button id="tp2">Picture 2</button> <img src="tup1" alt="" title="Picture 1"> <script> var tp1 = document.getElementById('tp1'); var tp2 = document.getElementById('tp2'); var img = document.querySelector('img'); tp1.onclick = function() { img.src = 'Picture address'; img.title = 'Picture 1'; } tp2.onclick = function() { img.src = 'Picture address'; img.title = 'Picture 2' } </script>
Modify different contents at different times
<img src="img/zao.jpg" alt=""> <div>Good morning</div> <script> var img = document.querySelector('img'); var div = document.querySelector('div'); var date = new Date(); var h = date.getHours(); if (h < 12) { img.src = 'img/zao.jpg'; div.innerHTML = 'Forenoon'; } else if (h < 18) { img.src = 'img/zhong.jpg'; div.innerHTML = 'Good afternoon.'; } else { img.src = 'img/wan.jpg'; div.innerHTML = 'Forenoon'; } </script>
Disable button
disabled=true；
<button>Button</button> <input type="text" value="Written words"> <script> var btn = document.querySelector('button'); var put = document.querySelector('input'); btn.onclick = function() { put.value = 'Click.'; // btn.disabled = true; this.disabled=true;//this points to the caller of the function } </script>
Attribute style action
Inline style operation: element.style
<style> div { width: 25px; height: 25px; background-color: red; } </style> </head> <body> <div></div> <script> var div = document.querySelector('div'); div.onclick = function() { div.style.backgroundColor = 'pink'; this.style.width = '200px'; } </script> </body>
Class name style operation: element.className
this.className = 'change';
Exclusion thought
1.Clear all elements style 2.Style other elements 3.Order cannot be reversed <button>Button 1</button> <button>Button 2</button> <button>Button 3</button> <button>Button 4</button> <button>Button 5</button> <script> var btns = document.getElementsByTagName('button'); for (var i = 0; i < btns.length; i++) { btns[i].onclick = function() { for (var i = 0; i < btns.length; i++) { btns[i].style.backgroundColor = ''; } this.style.backgroundColor = 'pink'; } } </script>
Event
onmouseover: mouse over
this.onmouseover=function(){}
onmouseout: mouse away
this.onmouseout=function(){}
Get elements
element. Attribute
<div id="dds">nsfas</div> <script> var div = document.getElementById('dds'); console.log(div.id); </script>
element.getAttribute ('attribute ')
<div id="dds">nsfas</div> <script> var div = document.getElementById('dds'); console.log(div.getAttribute('id')); </script>
Set property value
element. Attribute = 'value' / / set built-in attribute value
element.setAttribute ('attribute ',' value ');
Get id.removeattribute ('attribute ') / / remove attribute
Custom attribute specification data index = "1" / / must start with data -
New method to get custom attribute
dataset.attribute console.log(div.dataset.index)； dataset['index'] console.log(div.dataset['index'])；
If there are multiple connection words in the custom attribute, we use the hump name
<div data-list-name="1"></div> <script> var div = document.querySelector('div'); console.log(div.dataset['listName']); </script>
Node get element
Father node
node.parentNode
Child node
parentNode.childNodes (standard)
var ul = document.querySelector('ul'); for (var i = 0; i < ul.childNodes.length; i++) { if (ul.childNodes[i].nodeType == 1) { console.log(ul.childNodes[i]); } }
parentNode.children(Non standard) parentNode.firstChild //Get element first node parentNode.lastChild //Get the last left node of the element parentNode.firstElementChild //Get the first child element node parentNode.lastElementChild //Get the last child element node console.log(ol.children[0])； //Get elements
Brother node
node.nextSibling //Get the next sibling node node.previousSibling //Get the last sibling node node.nextElementSibling //Get the next sibling node node.previousElementSibling //Get the last sibling element node
compatibility function
function getNextElementSibling(element) { var el = element; while (el = el.nextSibling) { if (el.nodeType === 1) { return el; } } return null; }
Node operation
Create node document.createElement ('tagName ')
Add node node.appendChild (child) / / add element after it
node.insertBefore (child, specify element) / / add the element ul.insertBefore(li, ul.children[0]) to the front;
Delete node.removeChild (child) delete a node from DOM, and return the deleted node ul.removeChild(ul.children[0]);
Assign node node.cloneNode(), in brackets, it is the copy label, and if it is true, it will copy completelyBlock link jump
javascript: void(0)；
javasccript: ；
focus
On focus: get focus
<input type="text" value="Mobile phone"> <script> var text = document.querySelector('input'); text.onfocus = function() { // console.log('Get focus'); if (this.value === 'Mobile phone') { this.value = ''; } this.style.color = '#333'; } text.onblur = function() { // console.log('lose focus'); if (this.value === '') { this.value = 'Mobile phone'; } this.style.color = '#999'; } </script>
onblur: losing focus