Geek Academy javascript video material sharing

"Geek Academy JavaScript Video Tutorial" will introduce you to JavaScript in detail. JavaScript is a literal scripting language and a scripting language widely used in client-side Web development. Currently used by millions of web pages to improve design, validate forms, detect browsers, create cookies, and more.

JavaScript is a network scripting language that has been widely used in Web application development. It is often used to add various dynamic functions to web pages to provide users with smoother and more beautiful browsing effects. Usually JavaScript scripts realize their functions by embedding them in HTML.

is an interpreted scripting language (the code is not precompiled).

is mainly used to add interactive behaviors to HTML (an application under Standard Universal Markup Language) pages.

Can be directly embedded into HTML pages, but writing it as a separate js file is beneficial to the separation of structure and behavior.

Cross-platform feature, with the support of most browsers, it can run on multiple platforms (such as Windows, Linux, Mac, Android, iOS, etc.).

Video playback address: http://www.php.cn/course/204.html

Learning javascript learning requirements Pay attention to DOM operations, this is the key point and the difficulty:

1. Create a node

createElement()
var node = document.createElement(“div”);

There is nothing to say, create an element node, but pay attention, This node will not be automatically added to the document.

2. Create a text node

createTextNode()
var value = document.createTextNode(“text”);

Create a text node, which is commonly used to add content to element nodes and will not be automatically added to the document.
Many people know innerHTML, but don’t know this method. This adds static text. If the inserted content does not have HTML format, using createTextNode is safer than innerHTML, and innerText has browser incompatibility issues, so using createTextNode is very convenient. Works well.

3. Insert the node to the end

appendChild()
node.appendChild(value);

Insert the node to the end. The two nodes created above will not be automatically added to the document, so you need to use appendChild to insert it. .
If it is a new node, it is inserted to the end, and if it is an existing node, it is moved to the end. Many people do not notice this. If you understand this, and then combine it with the following method, you can move it conveniently. Operation node.

4. Insert the node in front of the target node

insertBefore()
var node = document.createElement(“div”);
var _p = document.createElement(“p”);
var _span = document.createElement(“span”);
node.appendChild(_p);
node.insertBefore(_span, _p);

The node is inserted in front of the

node. The second parameter is optional. If the If the two parameters are not written, they will be added to the end of the document by default, which is equivalent to appendChild.
Similarly, appendChild and insertBefore, if the node already exists, they will automatically delete the original node first, and then move it to the place you specify.
Tips for moving nodes to the front:

if (node.parentNode.firstChild)
node.parentNode.insertBefore(node, node.parentNode.firstChild);else node.parentNode.appendChild(node);

node.cloneNode(true);
node.cloneNode(false);
Copy the above div node, parameter true , copy the entire node and the content inside; false, copy only the node without the content inside, the copied new node will not be automatically inserted into the document, you need to use methods 3 and 4 to insert.

6. Delete nodes

removeChild()
node.removeChild(_p);

Delete the above

node from

. However, under normal circumstances, we don’t know what the parent node of the node to be deleted is, so we usually use this: node.parentNode.removeChild(node);

The above is the detailed content of Geek Academy javascript video material sharing. For more information, please follow other related articles on the PHP Chinese website!