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)
- 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