First, understand Web API
web API Application Programming Interface Application Programming Interface, is a pre-defined functions and methods The purpose is to provide application developers with a software-based or hardware. Any development language has its own API API features input and output (the I / O) API to use (the console.log ()) The concept of Web API A set of operating the browser function and page elements API (BOM and DOM) provided by the browser API Web API refers specifically provided herein browser (a set of methods) Master common way to call the API provided by the browser
Learning Objectives
1. grasp the concept of API and Web API
2 master common way API calls provided by the browser
3. Through Web API to develop interactive features common amount of page
4. can make use of search engines to solve the problem
Second, understand the concept of DOM
Document Object Model Document Object Model, an abstract form of the document object, the object provides us with properties and methods
For processing Markup Language, DOM is a tree-based structure
Documentation: a web page can be called a document
Node: Web page was all nodes (tags, attributes, text, comments, etc.)
Elements: the page labels
Properties: tag attributes
DOM operations are often carried out
Gets the element
Elements of the operation (or set its attributes call its methods)
Dynamically created elements
Events (when to do the appropriate action)
Three, DOM operations
1. Get page elements
1.1 get page elements according to id
<script> var p = document.getElementById('p'); </script>
1.2 acquiring the tag returns a dummy array
document.getElementsByTagName('div');
Precautions: Get to the collection is a dynamic collection
1.3 find child under the label of a label
var Container = document.getElementById ( 'Container' ); var divs = container.getElementsByTagName ( 'div'); where ID is not
1.4 Gets the element attributes according to the label
document.getElementsByName ( 'main'); Deprecated
1.5 Get tag element in accordance with the class attribute
document.getElementsByClassName ( 'main') have browser compatibility problems
1.6 Finding elements based selector (with a browser compatibility issues)
var main = document.querySelector ( 'main.' ); return one element var main = document.querySelectorAll ( 'main.'); a plurality of return
III. Events
Event: trigger a response 1 acquire button. 2 to a button to register the event. Click the event name Event Source: Who triggered the event Event handler Almost all of the labels can add an event was BTN = document.getElementById ( 'BTN' ) btn.onclick = function () { Alert ( 'Do not point I' ) }
Case 1: Click the button to switch back and forth Pictures
<input type="button" id='btn' value="点我">
<br>
<img src="image/denglun.jpg" id="mv" alt="">
<script>
was BTN = document.getElementById ( 'BTN' );
was MW = document.getElementById ( 'mw' );
were flag = 1 ;
btn.onclick = function() {
if (flag === 1) {
mv.src = 'image/dahua.jpg';
flag = 2;
} else if (flag === 2) {
mv.src = 'Image / denglun.jpg' ;
flag = 1;
}
}
</script>
Case 2: Get dom object property value and modify the properties
<a id="link" href="http://www.baidu.com" title="我是百度"> Baidu </a>
<img id="mv" src="image/dahua.jpg" alt="美女">
<script>
console.log(link.id);
link.href = 'http://google.com'
</script>
Case 3: Click the button to display the hidden div
<input id='btn' type="button" value="隐藏">
<br>
<div id="box"></div>
<script>
was BTN = document.getElementById ( 'BTN' );
var isShow = true;
btn.onclick = function () {
var box = document.getElementById('box');
if (isShow) {
box.className = 'hidden';
this.value = '显示';
isShow = false;
} else {
box.className = 'show';
this.value = '隐藏';
isShow = true;
}
}
</ script>
property tag corresponding to the general properties
this event source in the event handler, who called the event this points to who
Case 4: The default behavior to cancel a label
<a id='link' href="http://www.baidu.com">百度</a>
<script>
var link = document.getElementById('link');
link.onclick = function () {
Alert ( 'click me' );
return false ;
}
</script>
Four, innerHTML and innerText
Get content between the start and end tags innerHTML time access to content if the content of a label, or the label to obtain If innerText label, the label will filter out content, but also before and after the line breaks and gaps are removed HTML escape characters & lt; content & gt; angle brackets & quot; double quotes & apos,; single quotes & amp ; and the symbol & nbsp; & Copy;
Content provided when using innerText (textContent) high efficiency
is provided when using tag-containing innerHTML
IninnerText resolve compatibility issues
<div id="box">hello</div>
<script>
var box = document.getElementById('box');
console.log(getInnerText(box));
function getInnerText(element) {
if (typeof element.innerText === 'string') {
return element.innerText;
} else {
return element.textContent;
}
}
</script>
Fifth, form elements set
value content for most forms of acquisition (excluding option)
type input type tag can be read ()
disabled
checked
selected
Form elements with the use of non-form elements almost
Different places only disabled checked selected these attributes only true and false
Case 1: Assignment to a text box
<input type="text"> <br>
<input type="text"> <br>
<input type="text"> <br>
<input type="text"> <br>
<Input id = "btn" type = "button" value = "text box value acquired">
<script>
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'text') {
input.value = i;
}
}
was BTN = document.getElementById ( 'BTN' );
btn.onclick = function () {
var array = []
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'text') {
array.push(input.value);
}
}
console.log(array.join('|'))
}
Case 2: detect a user name and password
<input type="text" id='txtUserName'> <br>
<input type="password" id='txtUserPassword'> <br>
<input type="button" id="btnLogin" value=" 登 录 ">
<script>
var btnLogin = document.getElementById('btnLogin');
btnLogin.onclick = function () {
var txtUserName = document.getElementById('txtUserName');
var txtUserPassword = document.getElementById('txtUserPassword')
if (txtUserName.value.length < 3 || txtUserName.value.length > 6) {
txtUserName.className = 'bg';
return;
} else {
txtUserName.className = '';
}
if (txtUserPassword.value.length < 6 || txtUserPassword.value.length > 8) {
txtUserPassword.className = 'bg';
return;
} else {
txtUserPassword.className = '';
}
the console.log ( 'performs a login' );
}
</script>
Case 3: Sets the selected item in the drop-down box
<input type="button" value="设置" id='btnSet'>
<select name="" id="selCities">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">杭州</option>
<option value="4">郑州</option>
<option value="5">武汉</option>
</select>
<script>
var btnSet = document.getElementById('btnSet');
btnSet.onclick = function () {
var selCities = document.getElementById('selCities');
var options = selCities.getElementsByTagName('option');
var randomIndex = parseInt(Math.random() * options.length);
var option = options[randomIndex];
option.selected = true;
}
Case 4: get the focus of the event is to focus and lose focus blur
<style> .gray { color: gray; } .black { color: black; } </style> </head> <body> <Input type = "text" class = "gray" value = "Please enter your search keywords" id = "txtSearch"> <input type="button" value="搜索" id="btnSearch"> <script> var txtSearch = document.getElementById('txtSearch'); txtSearch.onfocus = function () { IF ( the this .Value === 'Please input the keyword' ) { the this .Value = '' ; the this .className = 'Black' ; } } txtSearch.onblur = function () { IF ( the this .value.length === 0 || the this .Value === 'Please input the keyword' ) { the this .Value = 'Please input the keyword' ; the this . = className 'Gray' ; } } </script>
Case 5: Select and anti-election
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: 16px Bold "Microsoft elegant black" ;
color: #fff;
}
td {
font: 14px "Microsoft elegant black" ;
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background - color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" name="" id="j_cbAll">
</th>
<Th> product </ th>
<Th> Price </ th>
</tr>
</thead>
<tbody id='j_tb'>
<tr>
<td>
<input type="checkbox">
</td>
<td>iPhone8</td>
<td>6000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>iWatch</td>
<td>6000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>iPad</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>Mac Pro</td>
<td>16000</td>
</tr>
</tbody>
</table>
<input type="button" value="反 选" id="btn">
<script>
var j_cbAll = document.getElementById ( 'j_cbAll' );
var j_tb = document.getElementById ( 'j_tb' );
var Inputs j_tb.getElementsByTagName = ( 'Input' );
j_cbAll.onclick = function () {
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type === 'checkbox') {
input.checked = this.checked;
}
}
}
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type !== 'checkbox') {
continue;
}
input.onclick = function () {
checkAllCheckBox ()
}
}
function checkAllCheckBox () {
var isAllChecked = true;
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type !== 'checkbox') {
continue;
}
if (!input.checked) {
isAllChecked = false;
}
}
j_cbAll.checked = isAllChecked;
}
was BTN = document.getElementById ( 'BTN' )
btn.onclick = function () {
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
if (input.type !== 'checkbox') {
continue;
}
input.checked = !input.checked;
checkAllCheckBox ();
}
}
</script>
</div>
</body>
</html>
Six, custom attributes operation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box" age="18" personId="1">张三</div>
<script>
var box = document.getElementById('box');
console.log(box.id);
console.log(box.getAttribute('age'));
box.setAttribute('geder','male');
box.removeAttribute('personId');
</script>
</body>
</html>