1. Find elements:
(1). There are 4 kinds of element objects that can be obtained directly without searching:
document.documentElement -
document.head -
document.body -
document.forms[i] -
(2). If you have obtained an element object, when you find the element object around you, you can use the search by the relationship between nodes: 2 types of relationships and 6 attributes
a. Father son relationship: 4 species 1). Parent element of element: element.parentElement Or element.parentNode 2). All direct child elements under element: element.children 3). The first direct child element under the element: element.firstElementChild 4). The last direct child element under the element: element.lastElementChild b. Brotherhood: 2 species 1). The previous brother of the element: element.previousElementSibling 2). The last brother of the element: element.nextElementSibling
(3). If you can find the desired element with one feature, you can find it by HTML feature: four methods:
a. Press id lookup:
var An element object=document.getElementById("id name");
b. Search by signature:
var Class array object=Any parent element.getElementsByTagName("Tag name"),
c. Press class Name lookup:
var Class array object=Any parent element.getElementsByClassName("class name")
d. Press name Name lookup form element:
var Class array object=document.getElementsByName("name name")
(4). If the desired element can be found only through complex search conditions, search by selector: 2 methods
a. Find only one eligible element:
var One element=Any parent element.querySelector("Arbitrary selector")
b. Find multiple qualified elements:
var Class array object=Any parent element.querySelectorAll("Arbitrary selector")
Summary: find the return value rule of function:
- If the original function returns the subscript position, if it cannot be found, it returns - 1
- If the original function returns an array or an object, if it cannot be found, it returns null
- If the original function returns a class array object, if an empty class array object cannot be found:
{ length:0 }
2. Modify element: three things can be modified
(1). Modified content: three kinds of contents can be modified:
a. Gets or modifies the of the element HTML content: element.innerHTML b. Gets or modifies the plain text content of an element: element.textContent c. Gets or modifies the value of a form element: Form Elements .value
(2). Modify attributes: 3
a. HTML standard attributes of string type: 2 types:
1). Old core DOM: 4 Functions
i. element.getAttribute("Attribute name");
ii. element.setAttribute("Attribute name", "Attribute value")
iii. var bool=element.hasAttribute("Attribute name")
iv. element.removeAttribute("Attribute name")
advantage: universal, shortcoming: Cumbersome
2). new HTML DOM:
i. element.Attribute name
ii. element.Attribute name="Attribute value"
iii. element.Attribute name!==""
iv. element.Attribute name=""
advantage: simple, shortcoming: Not everything
b. HTML standard attribute of bool type:
1). You can't use the old core DOM4 Function modification 2). Only use HTML DOM of"element.Attribute name"Method, and the value is bool type
c. Custom extended properties:
1). when: 2 species
i. replace id,class,A selector such as element is used as a condition to find the element that triggers the event
ii. Temporarily cache business data on client elements
2) HTML in: <element data-Custom attribute name="Attribute value">
3). js in: 2 species: (out-of-service.(access)
i. core DOM:
var Attribute value=element.getAttribute("data-Custom attribute name")
element.setAttribute("data-Custom attribute name","Attribute value")
ii. HTML5 standard: element.dataset.Custom attribute name
(3). Modify style:
a. To modify the inline style of an element:
element.style.css attribute="Attribute value"
b. Get the full style of the element:
var style=getComputedStyle(Element object); style.css attribute The calculated styles are read-only
c. When modifying the style of elements in batch, use class:
element.className="class name"
Conclusion: don't recite English names! Instead, you should remember what Chinese can do!
3. Add / remove elements:
(1). Add only one new element: Step 3
a. Create a new element:
var New element=document.createElement("Tag name")
b. Set key attributes for elements:
New element.Attribute name="Attribute value";
c. Add new element to DOM tree: 3 species:
1). Append at the end:
Parent element.appendChild(New element)
2). Insert before an element:
Parent element.insertBefore(New element, Existing element)
3). Replace an element:
Parent element.replaceChild(New element, Existing element)
(2). Optimization: minimize the number of DOM tree operations. There are two types:
a. If you add a parent element and a child element at the same time, you should first add the child element to the parent element, and then add the parent element to the parent element at one time DOM tree b. If the parent element is already on the page, add multiple child elements at the same level. Document fragment objects should be utilized 1). Create document fragment object: var frag=document.createDocumentFragment() 2). Add child elements to the document fragment object: frag.appendChild(Child element) 3). Finally, add the document fragment object to the DOM Under the parent element on the tree Parent element.appendChild(frag);
(3). Delete element:
Parent element Removechild (child element)
4. Common HTML DOM objects: (just understand)
(1). var img=new Image()
(2). table
a. table managed row grouping:
1). Add row grouping:
var thead=table.createTHead()
var tbody=table.createTBody()
var tfoot=table.createTFoot()
2) Delete row grouping:
table.deleteTHead(); table.deleteTFoot()
3). Get row grouping:
table.tHead table. tFoot table.tBodies[i]
b. Row group management row:
1). Add row:
i. Insert a new row into any row: var tr = row grouping insertRow(i);
ii. Insert a new line at the beginning: var tr = line grouping insertRow(0)
iii. add a new line at the end: var tr = line grouping insertRow()
2). Delete row: table deleteRow(tr.rowIndex)
3). Get row: row grouping rows[i]
c. Line management grid:
1). Add cell: var td=tr.insertCell()
2). Delete cell: tr.deleteCell(i)
3). Get cell: tr.cells[i]
(3). form:
a. Get form element: document forms[i]
b. Get form elements in form:
1). Standard: form Elements [I or id or name]
2). Abbreviation: if there is a name attribute: form Name name
c. Let form elements get focus automatically: form elements focus()
BOM:
1. window:
(1). Get window size:
a. Get full window size:
window.outerWidth and window outerHeight
b. Get the size of the document display area:
window.innerWidth and window innerHeight
(2). Open and close windows:
window.open() and window close()
2. There are four ways to open a new link:
(1). When the current window is open, you can go back
a. html: <a href="url" target="_self">
b. js: window.open("url", "_self");
(2). When the current window is open, it is forbidden to go back
a. js: location.replace("new url")
(3). When a new window is opened, multiple windows can be opened at the same time
a. html: <a href="url" target="_blank">
b. js: window.open("url", "_blank");
(4). When a new window opens, only one can be opened
a. html: <a href="url" target="Custom window name">
b. js: window.open("url", "Custom window name")
3. history:
(1). Forward: history go(n)
(2). Back: history go(-n)
(3). Refresh: history go(0)
4. location:
(1). Attribute: get each part of the url by segment:
a. location.href full url
b. location.protocol protocol
c. location.host hostname + port number
d. location.hostname hostname
e. location.port number
f. location.pathname relative path
g. location.search ? List of query string parameters after
h. location. Anchor # hash # address
(2). method:
a. When the current window is open, you can go back:
location.assign("new url") or location New href = "url"
b. When the current window is open, do not go back:
location.replace("new url")
c. Refresh: location reload();
5. navigator
(1). View the browser name and version number: navigator userAgent
(2). View the list of plug-ins installed in the browser: navigator plugins
Summary: Event:
1. Binding event: js:
(1). An event is bound to only one handler
Element on event name = function() {...}
(2). One event binds multiple handler functions
Element addEventListener("event name", event handler function)
(3). Remove an event listener:
Element removeEventListener("event name", original event handler object)
2. Event model:
Capture, target trigger, bubble
3. Event object:
(1). Get event object:
Element on event name = function(e) {...}
(2). Stop bubbling: e.stopPropagation()
(3). When multiple child elements are bound to the same event, use bubbling / event delegation to perform 3 steps:
a. Event is bound only once on the parent element
b. e.target instead of this
c. Judge whether any feature of e.target is the element we want
(4). Block element default behavior:
e.preventDefault()
(5). Get mouse position:
a. x, y coordinates relative to the upper left corner of the screen:
e.screenX, e.screenY
b. Relative to the x and y coordinates in the upper left corner of the document display area:
e.clientX, e.clientY
c. Relative to the x and y coordinates of the upper left corner of the element where the event is located:
e.offsetX e.offsetY
(6). Page scrolling events:
window.οnscrοll=function(){
var scrollTop=document.documentElement.scrollTop||
document.body.scrollTop
//If scrolltop > is more than, execute xx operation
//Otherwise, it will be restored
}