Content of this chapter :

  • Definition
  • Node type
  • Node relationship
  • Selectors
  • Style operation method style
  • Table operation method
  • How to operate the form
  • Element nodes ELEMENT
  • Attribute node attributes
  • Text node TEXT
  • Document nodes Document
  • Position operation method
  • Timer
  • pop-up
  • location
  • Other
  • Event operations
  • example

Definition

Document object model (Document Object Model,DOM) It's a HTML and XML Documentation programming interface .

Node type

12 There are different node types in NodeType Attribute to indicate the node type

Node type describe
1 Element Representative elements
2 Attr Representative attribute
3 Text Represents the text content in an element or attribute .
4 CDATASection Represents... In the document CDATA part ( Text that will not be parsed by the parser ).
5 EntityReference Represents an entity reference .
6 Entity Representative entity .
7 ProcessingInstruction Represents the processing instruction .
8 Comment For comments .
9 Document Represents the entire document (DOM Root node of tree ).
10 DocumentType Provides interfaces to entities defined for documents
11 DocumentFragment For lightweight Document object , Can hold a part of a document
12 Notation representative DTD The symbol declared in .

Node relationship

nodeType Returns the numeric value of the node type (1~12)
nodeName Element nodes : Tag name ( Capitalization )、 Attribute node : The attribute name 、 Text node :#text、 Document nodes :#document
nodeValue Text node : Include text 、 Attribute node : Include properties 、 Element node and document node :null
parentNode Parent node
parentElement Parent node label element
childNodes All child nodes
children First level sub node
firstChild First child node ,Node Objects form
firstElementChild The first child tag element
lastChild The last child node
lastElementChild The last child tag element
previousSibling Last sibling node
previousElementSibling Last brother tag element
nextSibling Next sibling node
nextElementSibling Next brother tag element
childElementCount The number of sub elements in the first layer ( Excluding text nodes and comments )
ownerDocument The document node pointing to the entire document
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="t">
<span></span>
<span id="s">
<a></a>
<h1>Nick</h1>
</span>
<p></p>
</div>
<script>
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 Objects 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); //<a></a>
console.log(sT.lastChild); //#text
console.log(sT.lastElementChild); //<h1>Nick</h1> console.log(tT.childElementCount); //
console.log(tT.ownerDocument); //#document </script>
</body>
</html>

Node relation method :

hasChildNodes()   Contains one or more nodes true

contains()   If it is a descendant node, return true

isSameNode()、isEqualNode()   The reference of the incoming node and the reference node returns for the same object true

compareDocumentPostion()   Determine the relationships between nodes

 The number Relationship 
1 The given node is not in the current document
2 The given node precedes the reference node
4 The given node is after the reference node
8 The given node contains the reference node
16 The given node is contained by the reference node

compareDocumentPostion() Node correspondence

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="t">
<span></span>
<span id="s">
<a></a>
<h1>Nick</h1>
</span>
<p></p>
</div>
<script>
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 By tT contain , So for 16; And tT after , So for 4, 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>

Selectors

getElementById()

One parameter : Element label ID
getElementsByTagName() One parameter : Element tag name
getElementsByName() One parameter :name Property name
getElementsByClassName() One parameter : A string containing one or more class names

classList

Returns an array of all class names

  • add ( add to )
  • contains ( There is returned true, Otherwise return to false)
  • remove( Delete )
  • toggle( Delete if it exists , Otherwise, add )
querySelector() receive CSS Selector , Returns the first element matched to , No rules null
querySelectorAll() receive CSS Selector , Returns an array , No return []
<!--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); //
</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); //
</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>

Style operation method style

style.cssText But for style Read and write the code in
style.item() Returns the value of a given location CSS Name of property
style.length style Number of parameters in code block
style.getPropertyValue() Returns the string value of the given property
style.getPropertyPriority() Check whether the given property is set !important, Return is set "important"; Otherwise, an empty string is returned
style.removeProperty() Delete the specified attribute
style.setProperty() Set properties , There are three parameters : Set property name , Setting property values , Is it set to "important"( Don't write or write "")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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 properties
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); //
console.log(tT.style.getPropertyValue("background-color")); //yellow
console.log(tT.style.getPropertyPriority("background-color")); // An empty string
console.log(tT.style.removeProperty("width")); //200px
tT.style.setProperty("width","200px",""); // Set properties , The third value is important Priority values , Don't write </script>
</body>
</html>

Table operation method

createTHead()

establish <thead> Elements , Return reference

deleteTHead()

Delete <thead> Elements

createTBody()

establish <tbody> Elements , Return reference

insertRow(0)

Insert <tr> Elements , from 0 Start

deleteRow(pos)

  Delete the row at the specified location

insertCell(0)

Insert <td> Elements , from 0 Start

deleteCell(pos)

Delete cells in the specified location

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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>

How to operate the form

document.forms

Get all forms

.submit()

Submit Form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></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 nodes ELEMENT

nodeType:1

nodeName The tag name of the access element
tagName The tag name of the access element
createElement() Create nodes
appendChild() Add node at the end , And return to the new node
insertBefore() Insert node before reference node , Two parameters : Nodes to insert and reference nodes
insertAfter() Insert node after reference node , Two parameters : Nodes to insert and reference nodes
replaceChild() Replacement node , Two parameters : Nodes to insert and nodes to replace ( Removed )
removeChild() Remove node
cloneNode() clone , A Boolean parameter ,true Is a deep copy ,false For light copy
importNode() Copy a node from the document , Two parameters : Nodes and Booleans to copy ( Copy child node )
insertAdjacentHTML()

insert text , Two parameters : Where to insert and text to insert

  • "beforebegin", Insert before the element
  • "afterbegin", Insert... Before the first child of the element
  • "beforeend", Insert... After the last child of the element
  • "afterend", Insert after the element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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'; // Set up css style
a2New.id = 'oneNew';
a2New.innerText = 'jenny'; // Set label middle 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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</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); //
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>

Attribute node attributes

nodeType:2

attributes

Get all tag properties
getAttribute() Gets the specified label property
setAttribute() Set the specified label
removeAttribute() Remove specified label

var s = document.createAttribute("age")

s.nodeValue = "18"

establish age attribute

Set the property value to 18

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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")); //
tT.removeAttribute("age");
console.log(tT.getAttribute("age")); //null
</script>
</body>
</html>

Text node TEXT

nodeType:3

innerText All plain text content , Include text in child Tags
outerText And innerText similar
innerHTML All child nodes ( Including elements 、 Comments and text nodes )
outerHTML Returns its own node and all its children
textContent And innerText similar , Returned content with style
data Text content
length Text length
createTextNode() Create text
normalize() Remove the space between the text and the text
splitText() Division
appendData() Additional
deleteData(offset,count) from offset Start deletion at the specified location count Characters
insertData(offset,text) stay offset Insert at the specified location text
replaceData(offset,count,text) Replace , from offset Start to offscount The text at is deleted text Replace
substringData(offset,count) Extract from ffset Start to offscount The text at
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="t">Nick</div> <script>
var tT = document.getElementById("t");
var tTOne = tT.firstChild;
console.log(tTOne.nodeType); // console.log(tTOne.data); //Nick
console.log(tTOne.length); // 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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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 nodes Document

nodeType:9

document.documentElement Represents the <html> Elements
document.body Represents the <body> Elements
document.doctype representative <!DOCTYPE> label
document.head Represents the <head> Elements
document.title representative <title> The text of the element , Modifiable
document.URL Current page URL Address
document.domain The domain name of the current page
document.charset The character set used by the current page
document.defaultView Returns the current  document Object is associated with  window  object , No return  null
document.anchors All bands in the document name Attribute <a> Elements
document.links All bands in the document href Attribute <a> Elements
document.forms All in the document <form> Elements
document.images All in the document <img> Elements
document.readyState Two values :loading( Loading document )、complete( Finished loading document )
document.compatMode

Two values :BackCompat: Standard compatibility mode off 、CSS1Compat: Standard compatibility mode on

write()、writeln()、

open()、close()

write() The text is output to the screen as is 、writeln() Line feed after output 、

open() Empty content and open new document 、close() Close the current document , Next time I write a new document

Position operation method

document.documentElement.offsetHeight

Total document height

document.documentElement.clientHeight

Document height on current screen

document.documentElement.clientWidth

The document occupies the current screen width

offsetHeight

Self height (height + padding + border)

scrollHeight

Document height (height + padding)

offsetTop

Positioning height from superior label (magin)

clientTop

border Height (border)

offsetParent

Parent location label , Elements

scrollTop

Rolling height

<!DOCTYPE html>
<html lang="en">
<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 height on screen 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> Elements 、 Parent location label function Scroll() {
console.log(document.body.scrollTop); // Rolling height
}
</script>
</body>
</html>

Timer

setInterval Multiple timers ( Millisecond time )
clearInterval Clear multiple timers
setTimeout Single timer
clearTimeout Clear single timer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</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>

Timer example

pop-up

alert() pop-up
confirm()

Confirmation box

Return value :true、false

prompt()

Input box

Two parameters : The text of the prompt and the default value of the input , Return value : The value of the input 、""、null

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

prompt

location

location.href

location.href = "url"

obtain URL

Redirect

location.assign("http://www.cnblogs.com/suoning")

Redirect to URL

location.search = "wd=suoning"

Modify query string ( Baidu search )

location.hostname

Service host name , example :www.cnblogs.com

location.pathname

route , example :suoning

location.port

Port number

location.reload()

Reload

Other

navigator Contains information about the browser
screen Contains information about the client display screen
history Include users ( In the browser window ) Visited URL
window.print();

Show print dialog

// One page back 
history.go(-1)
// One page ahead
history.go(1);
// Two pages ahead
history.go(2);
// When there is no parameter , Refresh current page
history.go() // One page back
history.back()
// One page ahead
history.forward()

history Method

Event operations

example :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" placeholder=" Please enter the content " />
<input type="text" class="style_before" value=" Please enter the content " onfocus="Focus(this)" onblur="Blur(this)" />
<!--onfocus Click in event 、onblur Click out event --> <script>
function Focus(ths) {
var th = ths;
if (th.value == " Please enter the content "){
ths.value = "";
ths.className = "style_after";
} }
function Blur(ths) {
var th = ths;
if (th.value == " Please enter the content " || th.value.trim().length == 0){
ths.value = " Please enter the content ";
ths.className = "style_before";
}
} </script>
</body>
</html> Search box

Search box

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="str_one" style="height: 150px; color: red; font-size: 50px; text-align: center; line-height: 150px"><b> &nbsp; Melon seed peanut spring , Health care of smoking and drinking &nbsp; </b></div> <script>
setInterval( function () {
str = document.getElementById("str_one");
str_text = str.innerText; first_char = str_text[0];
sub_char = str_text.slice(1,str_text.length);
new_str = sub_char + first_char; str.innerText = new_str;
},500);
</script>
</body>
</html>

Running lights

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.style_before {
color: lightgrey;
}
.style_after {
color: black;
}
</style>
</head>
<body>
<h3> hobby </h3>
<div>
<ul id="i1">
<li><input type="checkbox" value="1"> Basketball </li>
<li><input type="checkbox" value="2"> football </li>
<li><input type="checkbox" value="3"> Table Tennis </li>
</ul>
</div>
<button onclick="Cheakall()"> Future generations </button>
<button onclick="Cancleall()"> Deselect all </button>
<button onclick="Reversall()"> Reverse election </button>
<script>
function Cheakall() {
var i1 = document.getElementById("i1");
var cheak = i1.getElementsByTagName("input");
for (i=0;i<cheak.length;i++) {
cheak[i].checked = true;
}
}
function Cancleall() {
var i1 = document.getElementById("i1");
var cheak = i1.getElementsByTagName("input");
for (i=0;i<cheak.length;i++) {
cheak[i].checked = false;
}
}
function Reversall() {
var i1 = document.getElementById("i1");
var cheak = i1.getElementsByTagName("input");
for (i=0;i<cheak.length;i++) {
if (cheak[i].checked) {
cheak[i].checked = false;
}else {
cheak[i].checked = true;
}
}
}
</script>
</body>
</html>

Future generations 、 Reverse election

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide {
display: none;
}
.c1 {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.6);
z-index: 2;
}
.c2 {
position: fixed;
width: 400px;
height: 300px;
top: 50%;
left: 50%;
z-index: 3;
margin-top: -150px;
margin-left: -200px;
background-color: white;
text-align: center;
padding-top: 150px;
}
</style>
</head>
<body>
<div><input type="button" value=" Sign in " onclick="hihi()"></div>
<div id="cc1" class="c1 hide"></div>
<div id="cc2" class="c2 hide">
<div> user name :<input type="text"></div>
<div> The secret code :<input type="text"></div>
<input type="button" value=" determine ">
<input type="button" value=" Cancel " onclick="hisl()">
</div> <script>
function hihi() {
document.getElementById("cc1").classList.remove("hide");
document.getElementById("cc2").classList.remove("hide");
}
function hisl() {
document.getElementById("cc1").classList.add("hide");
document.getElementById("cc2").classList.add("hide");
}
</script>
</body>
</html>

Modal dialog

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
background-color: #dddddd;
}
.w{
margin: 0 auto;
width: 980px;
}
.pg-header{
background-color: black;
color: white;
height: 48px;
}
.pg-body .menu{
position: absolute;
left: 200px;
width: 180px;
background-color: white;
float: left;
}
.pg-body .menu .active{
background-color: #425a66;
color: white;
}
.pg-body .fixed{
position: fixed;
top: 10px;
}
.pg-body .content{
position: absolute;
left: 385px;
right: 200px;
background-color: white;
float: left;
}
.pg-body .content .item{
height: 900px;
}
</style> </head>
<body onscroll="Hua();">
<div class="pg-header">
<div class="w"></div>
</div>
<div class="pg-body">
<div id="menu" class="menu">
<ul>
<li> Chapter one </li>
<li> Chapter two </li>
<li> The third chapter </li>
</ul>
</div>
<div id="content" class="content">
<div class="item"> Moon tube in front of bed </div>
<div class="item"> The frost on the ground </div>
<div class="item" style="height: 100px"> I'm Guo Degang </div>
</div>
</div> <script>
function Hua() {
var xo = document.getElementById("menu");
var huaGao = document.body.scrollTop;
if (document.body.scrollTop>48){
xo.classList.add("fixed");
}else {
xo.classList.remove("fixed");
} var bod = document.body.offsetHeight;
var conAbs = document.getElementsByClassName("content")[0].offsetHeight;
var ck = document.documentElement.clientHeight;
// console.log((bod + conAbs) == (ck + huaGao));
if ((bod + conAbs) == (ck + huaGao)) {
var lenLi = xo.getElementsByTagName("li");
for (var i=0;i<lenLi.length;i++){
if (i == lenLi.length - 1){
lenLi[i].className = "active";
}else {
lenLi[i].className = "";
}
}
return
} var item = document.getElementById("content").children;
for (var i=0;i<item.length;i++){
var currentItem = item[i];
var currentItemBodyTop = currentItem.offsetTop + currentItem.offsetParent.offsetTop;
var currentItemWindowTop = currentItemBodyTop - huaGao; var currentHeight = currentItem.offsetHeight;
var bottomHeight = currentItemBodyTop + currentHeight; var ziJi = xo.getElementsByTagName("li")[i];
if (currentItemWindowTop<0 && huaGao < bottomHeight){
ziJi.className = "active";
} else {
ziJi.className = "";
} }
} </script>
</body>
</html>

Bookmark section

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
list-style: none;
padding: 0;
margin: 0;
}
ul li{
float: left;
background-color: #2459a2;
color: white;
padding: 8px 10px;
}
.clearfix:after{
display: block;
content: '.';
height: 0;
visibility: hidden;
clear: both;
}
.hide{
display: none;
}
.tab-menu .title{
background-color: #dddddd;
}
.tab-menu .title .active{
background-color: #0099dd;
color: black;
}
.tab-menu .content{
border: 1px solid #dddddd;
min-height: 150px;
}
ul li:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div style="width: 400px; margin: 0 auto;">
<div class="tab-menu">
<div class="title clearfix">
<ul>
<li target="h1" class="active" onclick="Show(this);"> SONY </li>
<li target="h2" onclick="Show(this);"> Google </li>
<li target="h3" onclick="Show(this);"> tencent </li>
</ul>
</div>
<div id="content" class="content">
<div con="h1">1...</div>
<div con="h2" class="hide">2...</div>
<div con="h3" class="hide">3...</div>
</div>
</div>
</div> <script>
function Show(ths) {
var Showli = ths;
var littarget = Showli.getAttribute("target");
var liclass = Showli.parentNode.children;
for (var i=0;i<liclass.length;i++) {
if (liclass[i].getAttribute("target") == littarget) {
liclass[i].classList.add("active");
}else {
liclass[i].classList.remove("active");
}
}
var liycontent = document.getElementById("content").children;
for (var i=0;i<liycontent.length;i++) {
if (liycontent[i].getAttribute("con") == littarget) {
liycontent[i].className = "";
}else {
liycontent[i].className = "hide";
}
}
}
</script>
</body>
</html>

menu

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.go-top {
position: fixed;
right: 28px;
bottom: 19px;
width: 38px;
height: 40px;
background-color: aliceblue;
}
.hide {
display: none;
}
</style>
</head>
<body onscroll="Func();">
<div style="height: 2000px"></div>
<div id="i2" class="go-top hide">
<a onclick="GoTop();"> Return to the top </a>
</div>
<script>
function Func() {
var scrolltop = document.body.scrollTop;
var ii = document.getElementById("i2");
if (scrolltop>300) {
ii.classList.remove("hide");
}else {
ii.classList.add("hide");
}
}
function GoTop() {
document.body.scrollTop = 0;
}
</script>
</body>
</html>

Return to the top

DOM、BOM More about manipulating supersets

  1. day45:JS Medium json&amp;JS Of BOM Operation and DOM operation

    Catalog 1. Add :CSS The elastic box in 2.JS in json Serialization 3.JS Medium BOM operation 3.1 location operation 3.2 timer 4.JS Medium DOM operation 4.1 Create a label 4.2 Find the label 4.3 ...

  2. DOM&amp;BOM note

    day01 required courses :1. DOM summary 2. ***DOM Trees 3. * lookup 1. DOM summary : DHTML: Dynamic web technology DHTML=HTML+CSS+JS Disdain the question : HTML XHTML DHTML X ...

  3. js--Dom Bom operation

    –      Basics –     Built-in objects ● String object : Handle all string operations ● Math object : *** ● Date object : Processing date and time storage . Transformation and expression ● Array object : Provide ...

  4. The first 30 God :DOM The object operation

    JS Including three parts :ECMAscript.DOM( Document object ).BOM( Browser object ) One .DOM( Document object )DOM Tree node ( Elements . attribute . label . Tags and so on are nodes ) Two . Access to the node documment.getElem ...

  5. About DOM The problem of operation and performance optimization of the system - Redraw and rearrange

      Write it at the front : Everybody knows DOM It's expensive to operate . And then where is the price ? One . visit DOM Elements Two . modify DOM Redraw rearrangement caused by One . visit DOM It's like a metaphor in a book : hold DOM and JavaScript( Here it means ECMScri ...

  6. JQuery summary : Selector induction 、DOM Traversal and event handling 、DOM Full operation and animation ( turn )

    JQuery summary : Selector induction .DOM Traversal and event handling .DOM Full operation and animation Go to end of metadata We may use the background page is generally used jquery Value assignment , Found a good article Catalog JQuery Conclusion 1 : Selector return ...

  7. Javascript Study two ---DOM Element operation

    Javascript It mainly includes :JS The grammar of ,DOM and BOM Operation and ECMAScript grammar . 1 How to get elements Get element method : adopt ID:document.getElementById(); One ...

  8. JavaScript DOM&amp;BOM

    1.DOM meaning D: Document file A document is a node tree , Each node is an object O:Object object JavaScript There are three types of objects in a language : (1) User defined objects (user-de ...

  9. What is? BOM?, What is? DOM? BOM Follow DOM The relationship between

    What is? BOM? BOM yes browser object model Abbreviation , Browser object model for short . It is used to get or set the properties of the browser . Behavior , for example : New window . Get screen resolution . Browser version number, etc . such as alert(); ...

Random recommendation

  1. Factory mode (Factory)

    One . classification Factory mode is mainly to provide transition interface for creating objects , In order to isolate the specific process of creating objects , To increase flexibility . The factory model is mainly divided into three parts , Simple factory model (Simple Factory)/ Factory method model (Fac ...

  2. KVO Key value observer

    KVO( Key value observer ) // The creation of listening -(id)initChildren:(Person *)person { self = [super init]; if (self != nil) { // Have ...

  3. liunx ln -s Soft connection

    Project encountered in different projects upload image sharing problem The solution is liunx Of ln -s Soft connection , usage : liunx ln -s File path Sharing ideas : Different directories are all connected to the same directory

  4. Run P4 without P4factory - A Simple Example In Tutorials. -2 attach simple_router Source code

    /* Copyright 2013-present Barefoot Networks, Inc. Licensed under the Apache License, Version 2.0 (th ...

  5. C++ Unable to write value to registry HKEY_LOCAL_MACHINE\Sofeware\Microsoft\Windows\CurrentVersion\Run, In order to realize the boot application .

    C++   Unable to write value to registry HKEY_LOCAL_MACHINE\Sofeware\Microsoft\Windows\CurrentVersion\Run, In order to realize the boot application . But it can be written to H ...

  6. [ Team project ]SCRUM project 4.0

    1. Prepare Kanban . Form reference drawing 4. 2. Mission claim , And mark the claim on the task tag on the Kanban . Let the individual take the initiative to lead the task first ,PM Balance the tasks according to the specific situation . And then everyone set out to do their job . 3. It's going well for the sake of teamwork ...

  7. turn :Git_Windows Under the system Git Installation diagram

    Original address :http://blog.csdn.net/jiguanghoverli/article/details/7902791 Windows Under the system Git Installation diagram Simply speaking Git It's a free . Open source ...

  8. mysql root Password reset

    1. modify my.cnf # The location is usually /etc/my.cnf 2. restart mysql service service mysqld restart 3. Get into mysql mysql -uroot -p Then go straight back 4. ...

  9. To configure IIS Make the site playable mp4 file

    Recently, I encountered such a problem , In the website mp4 It can't play -- Every time you click play, it will produce 404 Error of ( Here's the picture ). It's a strange question , Because other files on this server can be executed normally , such as xml.jpg.aspx Wait for the documents ...

  10. vue How to use in a project less

    First of all, yours. vue-cli Download complete First step     install less-loader  rely on npm  install  less less-loader  --save-dev It's automatically configured , No manual configuration ...