API and Web API

1.API is an interface provided for programmers to help us realize certain functions

2.Web API is a set of APIs (BOM and DOM) provided by the browser to operate the browser and page elements

3.Web API is mainly for the interface provided by the browser, and mainly for the interaction effect of the browser

4.Web API s generally have inputs and outputs (function parameters and return values), and many web APIs are methods (functions)

How to find DOM elements

getElementById()

Get the document according to the element id Getelementbyid (id attribute value)

The result is unique

<div id="time">
	Hello world
</div>
<script type="text/javascript">
	var timer = document.getElementById("time");
	console.log(timer);
</script>

getElementsTagName()

Get the document according to the tag name GetElementsByTagName (tag name)

The result is also a collection of html elements, HTMLCollection(), in the form of pseudo array, which accesses specific elements through subscripts

<p class="price">Exercise look === Class name 1</p>
<p class="price">Exercise look =----= Class name 2</p>
<script>
	let pnode = document.getElementsByTagName('p');
	console.log(pnode);
	pnode[0].style.color = 'skyblue';
</script>

getElementsByClassName()

Get the element document. According to the class name Getelementsbyclassname (class name)

1. The result is a collection of html elements, HTMLCollection(4), which is a pseudo array to access a specific html element through subscript; If the result has only one value, it is also accessed in the form of subscript

<p class="price">Exercise look === Class name 1</p>
<p class="price">Exercise look =----= Class name 2</p>
<p class="price">Exercise look == Class name 3</p>
<p>
	<input type="text" class="ipt" name="user">
	<br>
	<hr>
	<strong class="price">user name</strong>
	<br>
	<hr>
	<input type="text" class="ipt" name="pwd">
</p>
<script type="text/javascript">
let price = document.getElementsByClassName('price');
price[1].style.color = 'red';
price[0].style.color = 'green';
console.log(price);
// HTMLCollection(4) [p.price, p.price, p.price, strong.price]
</script>

getElementsByName()

Find document. By the value of the name attribute Getelementsbyname (name attribute value);

The result set is accessed through the subscript [list. Input] of the pseudo array element

<p>
	<input type="text" class="ipt" name="user">
</p>
<script>
	let ipt  = document.getElementsByName('user');
	console.log(ipt); // NodeList [input.ipt]
	ipt[0].style.borderColor = 'red';
</script>

querySelector()

The first matching element is found, and the result is a unique document Queryselector

<p>
	<input type="text" class="ipt" name="user">
	<br>
	<hr>
	<strong class="price">user name</strong>
	<br>
	<hr>
	<input type="text" class="ipt" name="pwd">
</p>
<script>
	let phtml = document.querySelector('p input');
	console.log(phtml);
	phtml.style.height = '50px';
</script>

querySelectorAll()

Find all the elements document Queryselectorall (selector)

The result is that the node collection object NodeList(5) accesses elements through subscripts in the form of pseudo arrays

<p id="text">Exercise look id lookup</p>
<p id="title">Exercise look</p>
<p class="price">Exercise look === Class name 1</p>
<p class="price">Exercise look =----= Class name 2</p>
<p class="price">Exercise look == Class name 3</p>
<script>
	let pnodes = document.querySelectorAll('p');
	console.log(pnodes);
	pnodes[3].style.fontSize = '50px';
</script>

DOM operation

DOM tree

• Document: a page is a document, which is represented by document in DOM
• Element: all tags in the page are elements, and element is used in DOM to show
• Node: all contents in a web page are nodes (labels, attributes, text, comments, etc.), which are represented by node in DOM

Custom attribute action

get attribute

🟢 element. Attribute name

<div id = "demo"></div>
<script>
	let div = document.querySelect('div');
	console.log(div.id); // demo
</script>

🟢 Getattribute (attribute name)

💡: You can get custom properties

 <h1 class="text title" title="This is a reminder" id="attr" abc="I tossed myself">Attribute operation</h1>
<script>
// Gets the attribute value of the tag
let text = document.getElementsByClassName('text');
let info = text[0].getAttribute('title');
console.log(info);// This is a reminder
</script>

🟢 element. Attribute and element The difference between getattribute ('attribute ')

• Both are used to obtain element attributes

• element. attribute Get the built-in attribute value (the attribute of the element itself)

• element.getAttribute('attribute ') mainly obtains customized attributes (standard) and programmer customized attributes

🟢domObj.attributes

Get all the attributes of the tag. The result is the Attribute Collection in the form of pseudo array

<ul>
	<li class="list" id="item" title="Set multiple properties" data-title="Plus customization">Get all properties of the tag</li>
	<li>Get all properties of the tag</li>
	<li>Get all properties of the tag</li>
	<li>Get all properties of the tag</li>
</ul>
<script>
	let list = document.querySelector('.list');
	let attrs = list.attributes;
	// The result NamedNodeMap is a pseudo array 
	console.log(attrs); 
	//  Access a specific property 
	console.log(attrs[0]); // class='list'
	console.log(attrs[2]); //  title = "set multiple attributes"
</script>

H5 get custom attributes

H5 specify the attribute name starting with user-defined date - and assign a value

<div data-index='1' data-list-name='andy'></div>

dataset is a collection containing all custom attributes starting with date

console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);

If there are multiple - connected words in the custom attribute, we adopt the hump naming method when obtaining

console.log(div.dataset.listName);
console.log(div.dataset['listName']);

set a property

🟡 element. Property name = 'value'

<div id = "demo"></div>
<script>
	let div = document.querySelect('div');
	div.id = 'test';
</script>

🟡 setAttribute('attribute name ',' attribute value ')

• Set the properties of the tag (add properties and assign values to the tag)

• Mainly for custom attributes

<p class="brief">Add attribute set attribute</p>
<script>
	let brief = document.getElementsByTagName('p');
	console.log(brief);
	// Add attribute
	brief[0].setAttribute('title','Attribute operation');
	// Modify attribute value
	brief[0].setAttribute('class','msg');
</script>

Remove Attribute

🔵 removeAttribute('attribute name ')

Delete the properties of the label

<div class="wrap" id="del" title="This is to be deleted" index="10">Delete attribute</div>
<script>
	let del = document.getElementById('del');
	del.removeAttribute('title')
	del.removeAttribute('index')
</script>

Operation of element content

innerText :

Label plain text operation is not recognized

<h1 class="text">hello </h1>
<div class="wrap">
	<p>abed, I see a silver light</p>
	<p>Li Bai lies on the ground</p>
</div>
<script>
	text.innerText= 'Chaofa Baidi City';
	// Unrecognized label
	text.innerText= '<i>Chaofa Baidi City</i>'
	console.log(text.innerText);
	// The obtained content is plain text and does not contain html structure
	console.log(wrap.innerText);
	wrap.innerText = 'replace';
	wrap.innerText += '<i> Additional content</i> ';
</script>

innerHtml:

Add and replace the content of the tag (html structure); Can identify labels

<h1 class="text">hello </h1>
<script>
	let text = document.querySelector('.text');
	console.log(text)
	// innerHtml adds and replaces the content of the tag (html structure); Can identify labels
	text.innerHTML = 'This is what was added';
	text.innerHTML = '<em>Labels are also OK</em>';
	console.log(text.innerHTML);
</script>

The specified content of the assignment replacement operation replaces the original content

<div class="wrap">
	<p>abed, I see a silver light</p>
	<p>Li Bai lies on the ground</p>
</div>
<script>
	let wrap = document.querySelector('.wrap');
	wrap.innerHTML = '<p>In the Quiet Night</p>';
	// Add operation
	wrap.innerHTML += '<p>abed, I see a silver light</p>';
	// Get content (html structure)
	let info = wrap.innerHTML;
	console.log(info);
</script>

outerHtml:

outerHTML: similar to innerHTML, except that it contains the tag itself

Operation of element style

element.style inline style operation

element.clsssName class name style operation

Operation class name

Class name of operation label classList class name collection object

obj.classList Get class name collection Pseudo array form

<h1 id="text" class="shop title info">classList Class name collection object</h1>
<script>
	let text = document.querySelector('#text');
	let list = text.classList;
	console.log(list);
//DOMTokenList(3) ['shop ',' title ',' info ', value:' shop Title Info '] pseudo array form
	console.log(list[1]);// title
</script>

Add / remove class name

obj.classList.add()

obj.classList.remove()

<h1 id="text" class="shop title info">classList Class name collection object</h1>
<script>
	//  Add a single class name 
	text.classList.add('item'); 
	//  Adding multiple class names can accept multiple parameters
	text.classList.add('item', 'box'); 
	//	Delete a single class name
	text.classList.remove('title'); 
	//  Deleting multiple class names can accept multiple parameters
	text.classList.remove('title', 'info')
</script>

Judge whether the class name exists

obj.classList.contains()

Judge whether there is a class name obj The result of contains (class name) is a Boolean value. true exists and false does not exist

<h1 id="text" class="shop title info">classList Class name collection object</h1>
<script>
	// let exit = text.classList.contains('info')
	let exit = text.classList.contains('list')
	console.log(exit);
</script>

Automatically switch class names

obj.classList.toggle()

<script>
// Delete if present, add if not
btn.onclick = function(){
text.classList.toggle('info')
}
</script>

Node operation

Get elements using node hierarchy

• All contents (labels, attributes, text, comments) in a web page are nodes, which are represented by nodes

• Using parent-child sibling node relationship to obtain elements

• Strong logic, but compatible

Nodes have at least three basic attributes: nodeType, nodeName and nodeValue

• Element node nodeType is 1
• Attribute node nodeType is 2
• The text node nodeType is 3 (the text node contains text, spaces, and line breaks)

Parent node operation

1. Parent node parentNode

2. The parentnode attribute returns the parent node of a node. Note that it is the nearest parent node

3. If the specified node has no parent node, null will be returned

<div class="demo">
    <div class="box">
        <span class="erweima">×</span>
    </div>
</div>

<script>
    // 1. Parent node
    var erweima = document.querySelector('.erweima');
    // var box = document.querySelector('.box');
    // The result is the parent node nearest to the element (parent). If the parent node cannot be found, it will return null
    console.log(erweima.parentNode);
</script>

Child node operation

parentNode.childNodes (standard)

• parentNode.childNodes returns a collection of child nodes containing the specified node, which is a collection of immediate updates

parentNode.children (non-standard)

• parentNode.children is a read-only attribute that returns all child element nodes. It only returns child element nodes, and other nodes do not return

<ul>
     <li>I am li</li>
     <li>I am li</li>
     <li>I am li</li>
     <li>I am li</li>
</ul>
<script>
	// 1. Child node parentnode childNodes
	let ul = document.querySelector('ul');
	// Child nodes all child nodes include element nodes, text nodes, and so on
	console.log(ul.childNodes);
	console.log(ul.childNodes[0].nodeType); // 3
	console.log(ul.childNodes[1].nodeType); // 1
	// 2.children get all child element nodes
	console.log(ul.children);
</script>

parentNode.firstChild

Returns the first child node. If it cannot be found, it returns null. It also contains all nodes

parentNode.lastChild

Returns the last child node. If it cannot be found, it returns null. It also contains all nodes

parentNode.firstElementChild (IE9 or above)

Returns the first child element node

parentNode.lastElementChild (IE9 and above)

Returns the last child element node

<ol>
    <li>I am li1</li>
    <li>I am li2</li>
    <li>I am li3</li>
    <li>I am li4</li>
    <li>I am li5</li>
</ol>
<script>
    let ol = document.querySelector('ol');
    // 1. The first child node of firstchild is either a text node or an element node
    console.log(ol.firstChild);
    console.log(ol.lastChild);
    // 2. firstElementChild is supported only when it returns the first child element node ie9
    console.log(ol.firstElementChild);
    console.log(ol.lastElementChild);
    // 3. The actual development method has no compatibility problem and returns the first child element
    console.log(ol.children[0]);
    console.log(ol.children[ol.children.length - 1]);
</script>

Sibling node operation

node.nextSilbling

node.nextSilbling returns the next sibling node of the current element. If it cannot be found, it returns null. Similarly, it also contains all nodes

node.previousSibling

node.previousSibling returns the next sibling node of the current element. If it cannot be found, it returns null, which also contains all nodes

node.nextElementsibling

node. Nexterelementsibling returns the next sibling element node of the current element. If it is not found, null is returned