query node:
js: 1. Query according to ID; 2. Query according to tag name; 3. Query according to name; 4. Query according to hierarchy; the details are as follows:
<script>
//1. Query nodes according to ID
var ul = document.getElementById("city");
var cd = document.getElementById("cd");
console.log(ul);
console.log(cd);
//2. Query the node according to the tag name
//2.1 Query within the entire document (document)
console.log(document.getElementsByTagName("li"));
//2.2 Query within an element node (element)
console.log(ul.getElementsByTagName("li"));
//3. Query nodes according to name (basically for form controls)
console.log(document.getElementsByName("sex"));
//4. Query nodes according to the hierarchy
//Get the parent, child and brother of the node that has been obtained
//4.1 Get the father and return a single value
console.log(cd.parentNode);
//4.2 Get the child, which returns multiple values
//The node returned in this way is an array, and the space will be put into the array as a child
console.log(ul.childNodes);
//Get the child's node without spaces
console.log(ul.getElementsByTagName("li"));
//There is no way to directly query siblings in the standard API,
//You must query the brother by querying the father and querying the child,
//The following statement outputs: Shanghai
console.log(cd.parentNode.getElementsByTagName("li")[1]);
</script>
jQuery : Use the jQuery selector directly, select the element, and operate it; please see another article: jQuery selector https://blog.csdn.net/huang_yx/article/details/79686975 ( click to open the link )
Read and write nodes:
js: roughly divided into: 1. Read and write node name and type; 2. Read and write node content; 3. Read and write node attributes; 4. Read and write form control values; the details are as follows:
<script>
//1. Read the name and type of the node
//get p1
var p1 =document.getElementById("p1");
console.log(p1.nodeName);
console.log(p1.nodeType);
//2. Read and write the content of the node (<p>content</p>)
//innerHTML: support sub-tags
console.log(p1.innerHTML)
console.log(p1.innerHTML = 'Try a single tag')
console.log(p1.innerHTML)
//innerText: Subtags are not supported
var p2 = document.getElementById("p2");
console.log(p2.innerText);
p2.innerText = "2.<u>Query</u>Node";
//3. Read and write the properties of the node
//3.1. The standard API is the following three
// get this node first
var img = document.getElementById("li");
console.log(img.getAttribute("src"));
img.setAttribute("src", "../img/add.png");
img.removeAttribute("src");
//3.2. New API (not supported by lower version browsers)
//Node.Attribute name (except class, to be written as className)
//Note: .style and .className are standard
var a = document.getElementById("baidu");
console.log(a.href);
a.href = "undifined";
//4. Read and write the value of the form control
//input.value/input.value=""
</script>
jQuery：
Read and write the HTML content of the node (supports sub-tags): corresponds to point 2 of the above js
obj.html()/obj.html("<span>123</span>")
Read and write the text content of the node (subtags are not supported): corresponds to point 2 of js above
obj.text()/obj.text("123")
Read and write the attribute value of the node: corresponding to the third point of the above js
obj.attr("attribute name")/obj.val("attribute name","attribute value")
Read and write the value attribute value of the node: corresponding to point 4 of the above js
obj.val()/obj.val("abc")
Note: obj represents a jQuery object
Adding or deleting nodes: js can only add and delete nodes through the parent node, while jQuery is much more convenient and has many corresponding APIs.
js：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Add or delete nodes</title>
<script>
function add(){
//create new node
// Equivalent to creating a <li></li> in memory
var li = document.createElement("li");
// Equivalent to creating a content in <li>
li.innerHTML = "Tianjin";
//Add a new node, which can be obtained through the father's child, or directly through the ID
var ul = document.getElementById("city");
ul.appendChild(li);
}
// insert into the middle of the node
function insertion(){
//create new node
var li = document.createElement("li");
li.innerHTML = "Chengdu";
//Insert a new node, before Guangzhou
var ul = document.getElementById("city");
var gz = document.getElementById("gz");
ul.insertBefore(li, gz)
}
//Delete the node, must be deleted through the parent
function del(){
//Get the node to delete
var sz = document.getElementById("sz");
//The node that deletes the child must be fetched through the parent
sz.parentNode.removeChild(sz);
}
</script>
</head>
<body>
<p>
<input type="button" value="增加"
onclick="add();"/>
<input type="button" value="插入"
onclick="insertion()"/>
<input type="button" value="删除"
onclick="del()"/>
</p>
<ul id="city">
<li>Beijing</li>
<li> Shanghai </ li>
<li id="gz">广州</li>
<li id="sz">深圳</li>
</ul>
</body>
</html>
jQuert ：
Create a node:
$("node content");
$("<span>你好</span>")
Insert Node: Common API
parent.append(obj): added as the last child node
parent.prepend(obj): added as the first child node
brother.after(obj): added as the next sibling node
brother.before(obj): added as the previous sibling node
Delete Node: Common API
obj.remove(): remove node
obj.remove(selector): only delete nodes that satisfy the selector
obj.empty(): empty the node
Traversing nodes: some APIs corresponding to jQuery to facilitate node operations
children()/children(selector): direct child nodes
next()/next(selector): the next sibling node
prev()/prev(selector): the previous sibling node
siblings()/siblings(selector): all siblings
find(selector): find all descendants that satisfy the selector
parent(): parent node
Summarize:
The operations of js and jQuery on nodes are nothing more than additions, deletions, modifications, and inspections, but jQuery is a js framework, and its core concepts: write less, do more; greatly simplify the writing of code. It encapsulates JS, CSS, DOM, and provides a consistent and simple API, which is more convenient and quick to use, and the corresponding writing method is also simpler.