DOM, BOM Operational Set

Keywords: Attribute Javascript Java Programming

DOM, BOM Operational Set

I. definition

Document Object Model (DOM) is a programming interface for HTML and XML documents.

Two, node

Node type

Node type describe
1 Element Representative elements
2 Attr Representative attribute
3 Text Represents text content in elements or attributes
4 CDATASection Represents the CDATA part of the document (text that will not be parsed by the parser)
5 EntityReference Representational entity citation
6 Entity Representative entity
7 ProcessingInstruction Representation Processing Instruction
8 Comment Representative notes
9 Document Represents the entire document (the root node of the DOM tree)
10 DocumentType Provide interfaces to entities defined for documents
11 DocumentFragment Represents a lightweight Document object that can accommodate a part of a document
12 Notation Symbols representing declarations in DTD

Node relationship

nodeType Returns the numeric value of the node type (1-12)
nodeName Element Node: Label Name (Uppercase), Attribute Node: Attribute Name, Text Node: #text, Document Node: #document
nodeValue Text Node: Contains Text, Attribute Node: Contains Attribute, Element Node and Document Node: null
parentNode Parent node
parentElement Parent Node Label Element
childNodes All child nodes
children Layer 1 sub-node
firstChild First byte point, Node object form
firstElementChild The first sublabel element
lastChild Last child node
lastElementChild Last sub-label element
previousSibling Last sibling node
previousElementSibling Last Brother Label Element
nextSibling Next sibling node
nextElementCount Next Brother Label Element
childElementCount Number of elements at the first level (excluding text nodes and comments)
ownerDocument Text nodes pointing to the entire document

Code example

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id="t">
        <span></span>
        <span id="s">
            <a></a>
            <h1>nick</h1>
        </span>
        <p></p>
    </div>
    <script type="text/javascript">

        var tT = document.getElementById("t");
        console.log(tT.nodeType,tT.nodeName,tT.nodeValue);// 1 "DIV" null
        console.log(tT.parentNode); //<body>....</body>
        console.log(tT.childNodes); // [text,span,text,span#s,text,p,text]
        console.log(tT.children); // [span,span#s,p,s:span#s]

        var sT = document.getElementById("s");
        console.log(sT.previousSibling); //# text, Node object form
        console.log(sT.previousElementSibling); // <span></span>
        console.log(sT.nextSibling); //#text
        console.log(sT.nextElementSibling); // <p></p>
        console.log(sT.firstChild); // #text
        console.log(sT.firstElementChild); //<h1>nick</h1>
        console.log(sT.lastChild); //#text
        console.log(sT.lastElementChild);//<h1>nick</h1>

        console.log(tT.childElementCount); //3
        console.log(tT.ownerDocument); //#document
    </script>
</body>
</html>

Node Relation Method:

  • hasChildNodes() returns true when it contains one or more nodes
  • contains() returns true if it is a descendant node
  • isSaneNode(), isEqualNode() Input node and reference node return true for the same object
  • compareDocumentPostion() Determines the relationships between nodes
numerical value relationship
1 The given node is not in the current document
2 The given node precedes the reference node
4 The given node is behind the reference node
8 A given node contains a reference node
16 The given node is contained by the reference node

Code example

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id="t">
        <span></span>
        <span id="s">
            <a></a>
            <h1>Nick</h1>
        </span>
        <p></p>
    </div>
    <script type="text/javascript">
        var tT = document.getElementById("t");
        var sT = document.getElementById("s");

        console.log(tT.hasChildNodes());//true
        console.log(tT.contains(document.getElementById('s'))); //true
        console.log(tT.compareDocumentPosition(document.getElementById('s'))); //// 20, because s is contained by tT, it is 16; and after tT, it is 4, and the sum of the two is 20.
        console.log(tT.isSameNode(document.getElementById('t'))); //true
        console.log(tT.isEqualNode(document.getElementById('t'))); //true
        console.log(tT.isSameNode(document.getElementById('s'))); //false
    </script>
</body>
</html>

3. Selector

selector











getElementById() One parameter: the ID of the element tag
getElementByTagName() One parameter: element tag name
getElementByName() One parameter: name attribute name
getElementsByClassName() One parameter: a string containing one or more class names
classList Returns an array of all class names
  • Add (add)
  • Contains (there is a return true, otherwise false)
  • Remove (delete)
  • Toggle (delete if it exists, otherwise add)
querySelector() Accept the CSS selector, return the first element that matches, and null if not
querySelectorAll() Receives the CSS selector, returns an array, and returns []

Code example

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <!--getElementById()-->
    <div id="t"></div>
    <script>
        var tT = document.getElementById('t');
        console.log(tT);
    </script>


    <!--getElementsByTagName()-->
    <div id="t">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <script>
        var tT = document.getElementsByTagName('div');
        console.log(tT); //[div#t, div, div, div, t: div#t]
        console.log(tT[0]); //<div id="t">...</div>
        console.log(tT.length); //4
    </script>


    <!--getElementsByName()-->
    <div name="nick"></div>
    <script>
        var tT = document.getElementsByName("nick");
        console.log(tT); //[div]
    </script>


    <!--getElementsByClassName()-->
    <div class="t">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <script>
        var tT = document.getElementsByClassName('t');
        console.log(tT); //[div.t]
        console.log(tT[0]); //<div id="t">...</div>
        console.log(tT.length); //1
    </script>


    <!--classList-->
    <div class="t t2 t3"></div>
    <script>
        var tT = document.getElementsByTagName('div')[0];
        tTList = tT.classList;
        console.log(tT); //<div class="t t2 t3"></div>
        console.log(tTList); //["t", "t2", "t3"]
        tTList.add("t5");
        console.log(tTList.contains("t5")); //true
        tTList.remove("t5");
        console.log(tTList.contains("t5")); //false
        tTList.toggle("t5");
        console.log(tTList.contains("t5")); //true
    </script>


    <!--querySelector()-->
    <div class="t t2 t3"></div>
    <div class="t" id="t"></div>
    <div name="nick"></div>
    <script>
        var tT = document.querySelector("div");
        console.log(tT); //<div class="t t2 t3"></div>
        var tI = document.querySelector("#t");
        console.log(tI); //<div class="t" id="t"></div>
        var tC = document.querySelector(".t");
        console.log(tC); //<div class="t t2 t3"></div>
        var tN = document.querySelector("[name]");
        console.log(tN); //<div name="nick"></div>
    </script>


    <!--querySelectorAll()-->
    <div class="t t2 t3"></div>
    <div class="t" id="t"></div>
    <div name="nick"></div>
    <script>
        var tT = document.querySelectorAll("div");
        console.log(tT); //[div.t.t2.t3, div#t.t, div]
        var tI = document.querySelectorAll("#t");
        console.log(tI); //[div#t.t]
        var tC = document.querySelectorAll(".t");
        console.log(tC); //[div.t.t2.t3, div#t.t]
        var tN = document.querySelectorAll("[name]");
        console.log(tN); //[div]
    </script>
</body>
</html>

Four, style

Style operation method style

style.cssText You can read and write code in style
style.item() Returns the name of the CSS attribute for a given location
style.length Number of parameters in style block
style.getPropertyValue() Returns the string value of a given attribute
style.getPropertyPriority() Check whether a given property is set! Important, set to return "important"; otherwise return an empty string
style.removeProperty() Delete specified properties
style.setProperty() Setting attributes can take three parameters: setting attribute name, setting attribute value, and setting "important".

Code example

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id="t" style="background-color: yellow; width: 100px; height: 100px">8</div>

    <script>
        var tT = document.getElementById("t");
        console.log(tT.style.cssText); //width: 100px; height: 100px; background-color: yellow;
        tT.style.cssText = "background-color: yellow; width: 200px; height: 200px"; //modify attribute
        console.log(tT.style.cssText); //width: 200px; height: 200px; background-color: yellow;
        console.log(tT.style.item("0")); //background-color
        console.log(tT.style.length); //3
        console.log(tT.style.getPropertyValue("background-color")); //yellow
        console.log(tT.style.getPropertyPriority("background-color")); //Empty string
        console.log(tT.style.removeProperty("width")); //200px
        tT.style.setProperty("width","200px",""); //Set the property, the third value is important priority value, not to write

    </script>
</body>
</html>

V. Table Operation

Form operation method

createTHead() Create thead elements and return references
deleteTHead() Delete the thead element
createTBody() Create the tbody element and return the reference
inseRow(0) Insert the tr element, starting at 0
deleteRow(pos) Delete rows at specified locations
insertCell(0) Insert the td element, starting at 0
deleteCell(pos) Delete cells at specified locations

Code example

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <script>
        var table = document.createElement("table");
        table.border = "1px";
        table.width = "150px";

        var theadt = table.createTHead();
        var tbody = table.createTBody();

        var trH0 = theadt.insertRow(0);
        trH0.insertCell(0).appendChild(document.createTextNode("Full name"));
        trH0.insertCell(1).appendChild(document.createTextNode("Age"));

        var trB0 = tbody.insertRow(0);
        var trB1 = tbody.insertRow(1);
        trB0.insertCell(0).appendChild(document.createTextNode("nick"));
        trB0.insertCell(1).appendChild(document.createTextNode("18"));
        trB1.insertCell(0).appendChild(document.createTextNode("jenny"));
        trB1.insertCell(1).appendChild(document.createTextNode("21"));

        trB0.deleteCell(1);

        console.log(table);
        document.body.appendChild(table);
    </script>
</body>
</html>

Form operation

Form operation mode

document.forms Get all forms
.submit() Submit Form

Code example

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
     <form action="https://www.baidu.com/s" method="get">
        <input type="text" name="wd" />
        <input type="button" value="Use Baidu Search" onclick="this.disable=true;BaiDu(this);" />
    </form>

    <script>
        var form = document.forms;  //Get all forms
        var formOne = form[0];
        console.log(form);
        console.log(formOne);

        function BaiDu(ths) {
            var inputBaiDu = ths;
            inputBaiDu.parentNode.submit();
        }
    </script>
</body>
</html>

Element Node ELEMENT

nodeType:1

nodeName Label name of access element
tagName Label name of access element
createElement() Create node
appendChild() Add the node at the end and return the new node
insertBefore() Insert a node before the reference node, with two parameters: the node to be inserted and the participating node
insertAfter() The reference node is inserted after the reference node, with two parameters: the node to be inserted and the reference node.
replaceChild() Replacement node, two parameters: the node to be inserted and the node to be replaced (removed)
removeChild() Remove node
cloneNode() Cloning, a Boolean parameter, true for deep copy, false for shallow copy
importNode() Copy a node from the document with two parameters: the node to be copied and the Boolean value (whether or not to copy the child node)
insertAdjacentHTML() Insert text, two parameters: the location of insertion and the text to be inserted
  • "Before begin", insert before this element
  • "afterbegin" is inserted before the first child element of the element
  • "beforeend" is inserted after the last child element of the element
  • "afterend" is inserted after the element

Code example:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id="t">
        <span id="one"></span>
        <span id="s">
            <a></a>
            <h1>Nick</h1>
        </span>
        <p></p>
    </div>
    <script>
        var tT = document.getElementById("t");

        //appendChild()
        var a1New = document.createElement('a');
        tT.appendChild(a1New);
        console.log(tT.lastElementChild); //<a></a>

        //insertBefore()
        var a2New = document.createElement('a');
        a2New.className = 't'; //Setting css Style
        a2New.id = 'oneNew';
        a2New.innerText = 'jenny'; //Setting label intermediate text
        tT.insertBefore(a2New,document.getElementById('one'));
        console.log(tT.firstElementChild); //<a class="t">jenny</a>

        //replaceChild()
        var a3New = document.createElement('h3');
        tT.replaceChild(a3New,document.getElementById('oneNew'));
        console.log(tT.firstElementChild); //<h3></h3>

        //removeChild()
        tT.removeChild(tT.firstElementChild);
        console.log(tT.firstElementChild); //<span id="one"></span>

        //cloneNode()
        var clNo = tT.cloneNode(true);
        console.log(clNo); //<div id="t">...</div>

        //importNode()
        var imNoT = document.importNode(tT,true);
        console.log(imNoT.firstChild); //#text
        var imNoF = document.importNode(tT,false);
        console.log(imNoF.firstChild); //null

        //insertAdjacentHTML()
        tT.insertAdjacentText("beforebegin","beforebegin");
        tT.insertAdjacentText("afterbegin","afterbegin");
        tT.insertAdjacentText("beforeend","beforeend");
        tT.insertAdjacentText("afterend","afterend");
    </script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id="t" class="tClass" title="tTitle" lang="en" dir="ltr"></div>

    <script>
        var tN = document.getElementById("t");
        console.log(tN.nodeType); //1
        console.log(tN.tagName); //DIV
        console.log(tN.nodeName); //DIV
        console.log(tN.id); //t
        console.log(tN.title); //tTitle
        console.log(tN.lang); //en
        console.log(tN.dir); //ltr
        console.log(tN.className); //tClass

        var dirNew = document.createElement("div");
        dirNew.className = "tC";
        dirNew.innerText = "Nick";
        console.log(dirNew); //<div class="tC">Nick</div>
    </script>
</body>
</html>

attributes of attribute nodes

nodeType:2

attributes Get all tag attributes
getAttribute() Gets the specified label attribute
setAttribute() Setting the specified label properties
removeAttribute() Remove specified label attributes
var s=document.createAttribute("age") s.nodeValue="18" Create age attributes Set the property value to 18

Code example

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id="t" class="s1 s2" name="nick"></div>

    <script>
        var tT = document.getElementById("t");

        console.log(tT.attributes); //NamedNodeMap {0: id, 1: class, 2: name, length: 3}
        console.log(tT.attributes.id); //id="t"
        console.log(tT.attributes.class); //class="s1 s2"

        console.log(tT.attributes.getNamedItem("name")); //name="nick"
        console.log(tT.attributes.removeNamedItem("class")); //class="s1 s2"
        console.log(tT.attributes.getNamedItem("class")); //null
        var s = document.createAttribute("age"); //Create properties
        s.nodeValue = "18"; //Setting property values
        console.log(tT.attributes.setNamedItem(s));
        console.log(tT.attributes); //NamedNodeMap {0: id, 1: name, 2: age, length: 3}
        console.log(tT.attributes.item("1")); //name="nick"
    </script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id="t" class="s1 s2" name="nick"></div>

    <script>
        var tT = document.getElementById("t");

        console.log(tT.attributes); //NamedNodeMap {0: id, 1: class, 2: name, length: 3}
        console.log(tT.attributes.id); //id="t"
        console.log(tT.attributes.class); //class="s1 s2"

        console.log(tT.getAttribute("name")); //nick
        tT.setAttribute("age",18);
        console.log(tT.getAttribute("age")); //18
        tT.removeAttribute("age");
        console.log(tT.getAttribute("age")); //null
    </script>
</body>
</html>

Text Node

nodeType:3

innerText All plain text content, including text in subtags
outerText Similar to innerText
innerHTML All child nodes (including elements, annotations, and text nodes)
outerHTML Returns its own node and all its children
textContent Similar to innerText, the returned content is styled
data Text content
length Text length
createTextNode() Create text
normalize() Delete blanks between text fields
splitText() Division
appendData() Append
deleteData(offset,count) Delete count characters from the location specified by offset
insertData(offset,text) Insert text at the location specified by offset
replaceData(offset,count,text) Replacement. Text replaces text from offset to count
substringData(offset,count) Extract text from offset to count

Code example:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id="t">Nick</div>

    <script>
        var tT = document.getElementById("t");
        var tTOne = tT.firstChild;
        console.log(tTOne.nodeType); //3

        console.log(tTOne.data); //Nick
        console.log(tTOne.length); //4

        var tTNew = document.createTextNode("18");
        console.log(tTNew.nodeType,tTNew.data); //3 "18"

        tTOne.appendData("18");
        console.log(tTOne.data); //Nick18
        tTOne.deleteData(4,2);
        console.log(tTOne.data); //Nick
        tTOne.insertData(0,"jenny");
        console.log(tTOne.data); //jennyNick
        tTOne.replaceData(0,5,"18");
        console.log(tTOne.data); //18Nick
        var tTSub = tTOne.substringData(2,6);
        console.log(tTSub); //Nick
    </script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id="t">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

    <script>
        var tT = document.getElementById("t");
        console.log(tT.innerText); //1,2,3
        console.log(tT.outerText); //1,2,3
        console.log(tT.innerHTML); //<div>1</div>,<div>2</div>, <div>3</div>
        console.log(tT.outerHTML); //<div id="t">,<div>1</div>,<div>2</div>,<div>3</div>,</div>
        console.log(tT.textContent); //1, 2, 3 (with style)
    </script>
</body>
</html>

Document Node

nodeType: 4

document.documentElement Represents html elements in a page
document.body Represents the body element in the page
document.doctype Representative! DOCTYPE tag
document.head Represents the head element in the page
document.title Text representing title elements, modifiable
document.URL The URL address of the current page
document.domain The domain name of the current page
document.chartset Character set used in the current page
document.defaultView Returns the window object associated with the current document object without returning null
document.anchors All a elements with name attributes in the document
document.links All a elements with href attributes in the document
document.forms All form elements in the document
document.images All img elements in the document
document.readyState Two values: load (loading document), complete (already loaded document)
document.compatMode Two values: BackCompat: Standard Compatibility Mode turned off, CSS1Compat: Standard Compatibility Mode turned on
write()/writeln() write() text output to the screen, writeln() output followed by line breaks
open()/close() open() empties the content and opens a new document, close() closes the current document, and next time writes a new document

Position operation method

document.documentElement.offsetHeight Total Document Height
document.documentElement.clientHeight Documents occupy the current screen height
document.documentElement.clientWidth Documents occupy the current screen width
offsetHeight Height + padding + border
scrollHeight Document height (height+padding)
offsetTop Magin
clientTop border Height
offsetParent Parent Location Labels, Elements
scrollTop Rolling height

Code example

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .zg {
            height: 1000px;
            position: relative;
            border: 3px solid transparent;
        }
        .dg {
            height: 500px;
            padding-top: 10px;
            margin-top: 20px;
            border: 2px solid transparent;
        }
    </style>
</head>

<body onscroll="Scroll()">
    <div id="zg" class="zg">
        <div id="dg" class="dg">

        </div>
    </div>

    <script>
        var zg = document.documentElement.offsetHeight;
        console.log(zg); //1000, Total Document Height
        var dg = document.documentElement.clientHeight;
        console.log(dg); //667, Variable, Document-to-Screen Height

        var dgBox = document.getElementById("dg");
        console.log(dgBox.offsetHeight); //514 (padding,border), self-height
        console.log(dgBox.scrollHeight); //510 (padding), document height
        console.log(dgBox.offsetTop);  //20 (magin), distance from superior positioning height
        console.log(dgBox.clientTop); //2(border), border height
        console.log(dgBox.offsetParent); //<div id="zg" class="zg"> </div> element, parent location label

        function Scroll() {
            console.log(document.body.scrollTop); //Rolling height
        }
    </script>
</body>
</html>

12. Timer

setInterval Multiple Timers (Millisecond Timing)>
clearInterval Clear multiple timers
setTimeout One-shot Timer
clearTimeout Clear single timer

Code example

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <input type="button" value="Interval" onclick="Interval();" />
    <input type="button" value="StopInterval" onclick="StopInterval();" />
    <script>
        function Interval() {
            s1 = setInterval(function () {
                console.log(123);
            }, 1000);
            s2 = setInterval(function () {
                console.log(456);
            }, 2000);
            console.log(1);
        }
        function StopInterval() {
            clearInterval(s1);
            clearInterval(s2);
        }
    </script>
</body>
</html>

13. Pop-up Box

alert() Popup
confirm() Confirmation box - Return value: true, false
prompt() Input box - Two parameters: the text of the prompt and the default value of the input, and the return value: the input value, "", null

prompt

var result = prompt("What is your name?" ,"Nick");
if(result != null){
    alert("welcome,"+result);    
}
console.log(result)

14. location

location.href Get URL
location.href="URL" redirect
location.assign("http://www.baidu.com") Redirect to URL
location.search="wd=hundan" Modify the Query String (Baidu Search)
location.hostname Service hostname, example: www.baidu.com
location.pathname Path, example: baidu
location.port Port number
location.reload Reload

XV. Others

navigator Contains information about browsers
screen Contains information about the client display screen
history Contains URL s accessed by users (in browser windows)
window.print() Display Print Dialog Box

Code example:

//Back a page
history.go(-1)
//Advance page
history.go(1);
//Forward two pages
history.go(2);
//Refresh the current page without parameters
history.go()

//Back a page
history.back()
//Advance page
history.forward()

Event Operation

attribute When did this happen? .
onabort The loading of the image was interrupted.
onblur Elements lose focus
onchange The content of the domain is changed
onclick Event handle invoked when a user clicks on an object
ondblclick Event handle invoked when a user double-clicks an object
onerror Error loading document or image
onfocus Elements get focus
onkeydown A keyboard key is pressed
onkeypress A keyboard key is pressed and released
onkeyup A keyboard key is released
onload Complete loading of a page or image
onmousemove Mouse is moved
onmousedown The mouse button is pressed
onmouseout Mouse moves away from an element
onmouseover Mouse over an element
onmouseup The mouse button is released
onreset Reset button clicked
onresize The window or frame is resized
onselect Text is selected
onsubmit Confirm that the button is clicked
onunload User Exit Page

Posted by bulgin on Fri, 22 Mar 2019 21:45:54 -0700

Hot Keywords

©2025 Programmer Group