catalogue
1, DOM (upper)
1. Web API: a set of interfaces provided by the browser to operate browser functions and page elements
2. Composition of JavaScript:
(1) ECMAScript: it is the core of Javascript. It defines a set of syntax, and Javascript implements these syntax specifications.
(2)DOM: Document Object Model
document.title = "WebAPI"
console.log(document.title)
document.write("<h2>Xi'an University of Posts and Telecommunications</h2>")A. It is the standard programming interface of pointer HTML/XHTML language launched by W3C organization
B. You can access and set HTML page elements through DOM interface
C.DOM tree: an html document is a tree (document model tree)
D. Common concepts:
Document: an html page is a document
element: all labels in a page
node: all contents in the page are nodes (tags, tag attributes, text in tags, comments). In DOM, all nodes are objects, and each object has its own attributes and methods.
E. Get element:
a. Get by ID: document.getElementById('id ')
<div id="box"></div>
<script>
var d = document.getElementById('box')
console.log(d)
</script>b. Get by tag name: document.getElementsByTagName gets an Array, and the method returns a pseudo Array (the method in Array cannot be used)
<div id="box"></div>
<div id="b1"></div>
<div id="b2"></div>
<script>
var divs = document.getElementsByTagName('div')
console.log(divs)
console.getElementsByTagName(Array.isArray(divs))
</script>c. Get according to the name attribute: document.getElementsByTagName(), the return value of this method is an array
<input type="checkbox"name="hobby" value="Swimming">Swimming
<input type="checkbox"name="hobby" value="music">music
<input type="checkbox"name="hobby" value="Football">Football
<script>
var hobbys = document.getElementsByName('hobby');
console.log(hobbys)
hobbys[0].checked = true;
</script>
d. Get: document.getElementsByClassName according to the class attribute of the tag. The return value of this method is an array
<p class="p1">University of Posts and Telecommunications</p>
<p class="p1">University of Political Science and Law</p>
<p class="p1">University of Petroleum</p>
<script >
var ps = document.getElementsByClassName('p1')
console.log(ps)
</script>F. New get element in HTML (label) method: consider browser compatibility
a.document.querySelector (): you can select elements according to the id and class attributes of the tag
b.document.querySelectorAll(): select all elements
<body>
<p class="p1">University of Posts and Telecommunications</p>
<p class="p1">University of Political Science and Law</p>
<p class="p1">University of Petroleum</p>
<div id="d1">Jiaotong University</div>
<ul>
<li >Journey to the West</li>
<li>three countries</li>
<li>Water Margin</li>
</ul>
<script >
// var ps = document.getElementsByClassName('p1')
// console.log(ps)
var qs = document.querySelector('.p1');//Select the first element according to the class attribute value
console.log(qs)
var dd = document.querySelector('#d1 '); / / use the id selector to select elements
console.log(dd)
var li = document.querySelector('li');//Select the first li element by tag name
console.log(li)
var lis = document.querySelectorAll('li');//Choose to use the li tag
console.log(lis)
</script>
</body>
G. Properties of the document object
a.title: the title of the page, that is, the title element (label) of the page
b.body: the body element (label) of the page
c.documentElement: html element (tag) of the page
console.log(document.documentElement)
d.forms: form element (label) in the page
e.image: image elements (labels) in a page
H. Event: an operation (action) performed by a user. This action can be detected by Javascript and processed by the "trigger response" mechanism. It is an important way to realize page interaction
a. Event source: the element that triggered the event (who triggered the event)
b. Event type: what type of event is triggered
c. Event handler function (event response function): what to do after an event is triggered
<body>
<button id="btn">click a button</button>
<script>
//Get button
var btn = document.getElementById('btn');
//Register events and event handlers for buttons
btn.onclick = function(){
alert('You clicked the button')
}
</script>
</body>1. Content of operation element (label)
a.element.innerHTML: sets or returns the HTML between the beginning and end of an element, including tags, spaces, and line breaks
<body>
<input type="text" id="userName">
<button id="btn" onclick="f1()">click a button</button>
<div id="dt"></div>
<script>
function f1(){
//Get value in input
var name = document.getElementById('userName').value;
//Put the value of input into div
document.getElementById('dt').innerHTML = name;
}
</script>
</body>b.interText: plain text content (remove labels and formatting)
c.textContent: remove the plain text content of the label
<body>
<div id="box">
Xi'an University of Posts and Telecommunications
<p>
Northwest University of political science and law
<a href="https://Www.baidu.com "> go to Baidu</a>
</p>
</div>
<script>
var box = document.getElementById('box');
console.log("interHTML:", box.innerHTML);
console.log("interText:",box.innerText);
console.log("textContent:",box.textContent)
</script>
</body>
J. Attributes of the action element:
<body>
<button id="flower">cloud</button>
<button id="grass">stars</button>
<br><br>
<img src="../image/2.png" title="cloud" alt="">
<script>
//Get page elements
var flower = document.getElementById('flower');
var grass = document.getElementById('grass');
var img = document.querySelector('img');
//2 register event handlers
flower.onclick = function(){
img.src = '../image/2.png'
img.title= 'cloud'
}
grass.onclick = function(){
img.src = '../image/4.png'
img.title = 'stars'
}
img.onmouseover = function(){ //Mouse over
img.src = '../image/2.png'
img.title= 'cloud'
}
img.onmouseout = function(){ //Mouse away
img.src = '../image/4.png'
img.title = 'stars'
}
</script>
</body>K. Style of operation element
a. Action style attribute: style.style.style attribute name
' Style attribute name 'corresponds to the attribute name of CSS, which is separated by' - 'between the words of style attribute name in CSS; in Javascript, the style attribute name adopts hump naming method.
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box')
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'red';
box.style.transform = 'rotate(20deg)'
</script>
</body> 
b. Operation className attribute: element object: className attribute
<style>
div{
width: 100px;
height: 100px;
background-color:pink;
}
.change{
background-color: purple;
color: #fff;
font-size: 25px;
margin-top: 100px;
}
</style>
<body>
<div class="first">Xi'an University of Posts and Telecommunications</div>
<script>
//Get element
var div = document.querySelector('div');
//Registration event
div.onclick = function(){
this.className = 'change';
}
</script>
</body>Show or hide text box contents:
<body>
<div>
<label for="">
<input type="text" name="" id="userName" value="mobile phone" style="color: #999;">
</label>
</div>
<script>
//Get element: input
var text = document.querySelector('input')
//Register an event to get focus for the element: onfocus
text.onfocus = function(){
if(this.value === 'mobile phone'){
this.value = '';
}
this.style.color = '#333';
}
//3. Register the event of losing focus for the element: unblur
text.onblur = function(){
if(this.value === ''){
this.value = 'mobile phone'
}
this.style.color = '#999';
}
</script>
</body>2, DOM (bottom)
1. Exclusive thought: clear the effects of all elements (including yourself) and reset the current element
<body>
<div>
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
</div>
<script>
//1. Get all buttons
var btns = document.getElementsByTagName('button');
//2. Loop: register an onclick event for each button
for(var i=0;i<btns.length;i++){
btns[i].onclick = function(){
//Circular exclusion: remove the background color of all buttons
for(var j=0;j<btns.length;j++){
btns[j].style.backgroundColor = '';
}
//Sets the background color of the current button
this.style.backgroundColor = 'pink';
}
}
</script>
</body> 
(1) Mouse events:
a. Mouse over: mouseover
b. Mouse out
<style>
.bg{
background-color: red;
}
</style>//1. Get all TRS under tbody
var trs = document.querySelector('tbody').querySelectorAll('tr');
//2. Bind events to each tr
for(var i=0;i<trs.length;i++){
trs[i].onmouseover = function(){
this.className = 'bg'
}
trs[i].onmouseout = function(){
this.className = '';
}
} 
2. Attribute operation:
(1) Get property value
a. There are two methods for the inherent attributes of elements:
Element name. Inherent attributes
Element name. getAttribute ('intrinsic attribute ')
b. For non intrinsic attributes of elements:
Element name. getAttribute ('intrinsic attribute ')
<body>
<div id="demo" index="1" class="nav"></div>
<script>
var div = document.querySelector('div');
console.log("Id:",div.id)
console.log("Id:",div.getAttribute('id'));
console.log("Index",div.in);//index represents the inherent attribute of div
console.log("INdex",div.getAttribute('index'))
console.log("Class:",div.class)
</script>
</body>
(2) Set attribute value
a. Intrinsic attribute value:
element. Attribute name = value
element.setAttribute ('attribute ', value)
b. Non intrinsic attributes: element.setAttribute ('attribute ',' value ')
<body>
<div></div>
<script>
var div = document.querySelector('div')
div.id = 'test';
div.className = 'nav';
div.setAttribute('index',1002)
</script>
</body>
(3) Remove attribute value
<body>
<div></div>
<button>Remove Attribute </button>
<script>
var div = document.querySelector('div')
div.id = 'test';
// div.className = 'nav';
div.setAttribute('index',1002)
div.setAttribute('class','nav')
var btn = document.querySelector('button');
btn.onclick = function(){
div.removeAttribute('index')
}
</script>
</body>
3. Custom attributes in H5
(1) Custom attribute specification: data attribute name
(2) Implementation method:
a. Customize: data attribute name in html tag
<div>
<p data-index="111"></p> <!--data Is a prefix,The property name is index-->
</div>b. Define in JavaScript: element.dataset. Attribute name = 'value'
(3) Get custom attribute value
a.element.dataset. Attribute name
b.element.dataset ['attribute name']
dataset: is a collection that stores all the custom attributes starting with data -. If the custom attribute name has multiple separators' - ', the' - 'shall be removed when obtaining the attribute and the hump naming method shall be adopted
<body>
<div>
<p data-index="111" data-list-phone="1008611">Xi'an University of Posts and Telecommunications</p> <!--data Is a prefix,The property name is index-->
<button>get attribute</button>
</div>
<script>
var p = document.querySelector('p');
p.dataset.class = "nav";
p.setAttribute('data-name','kong ming')
var btn = document.querySelector('button');
btn.onclick = function(){
console.log("Name:",p.dataset.name);
console.log("Index:",p.dataset['index']);
console.log("Phone:",p.dataset.listPhone)//Hump nomenclature
}
</script>
</body>