Learn 03 JS (get element, event basis, operation element, node get element, focus)

Keywords: Front-end Attribute Mobile Javascript

Get elements

document.getElementById('parameter ');

Get id element


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


Return body element object


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>
        // (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() {

Mouse event


Left click to trigger


Mouse over trigger


Mouse off trigger


Get mouse focus trigger


Lose mouse focus trigger


Mouse movement trigger


Mouse pop up trigger


Mouse down trigger

Operational elements

Change element content

element.innerText: spaces and line breaks will not be preserved

    <div>Heel change</div>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.onclick = function() {
            div.innerText = 'Replacement content';

element.innerHtml: spaces and line breaks will be reserved

        <strong>content</strong> Written words
        var ven = document.querySelector('p');

Modify element properties

 <button id="tp1">Picture 1</button>
    <button id="tp2">Picture 2</button>
    <img src="tup1" alt="" title="Picture 1">
        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'

Modify different contents at different times

<img src="img/zao.jpg" alt="">
    <div>Good morning</div>
        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';

Disable button


    <input type="text" value="Written words">
        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

Attribute style action

Inline style operation: element.style

        div {
            width: 25px;
            height: 25px;
            background-color: red;

        var div = document.querySelector('div');
        div.onclick = function() {
            div.style.backgroundColor = 'pink';
            this.style.width = '200px';

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>
        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';


onmouseover: mouse over


onmouseout: mouse away


Get elements

element. Attribute

<div id="dds">nsfas</div>
        var div = document.getElementById('dds');

element.getAttribute ('attribute ')

 <div id="dds">nsfas</div>
        var div = document.getElementById('dds');

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>
        var div = document.querySelector('div');

Node get element

Father node


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) {
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 completely

Block link jump

javascript: void(0);

javasccript: ;


On focus: get focus

<input type="text" value="Mobile phone">
        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';

onblur: losing focus

Posted by richclever on Thu, 27 Feb 2020 18:53:51 -0800