js: 1. Query based on ID; 2. Query based on tag name; 3. Query based on name; 4. Query based on level; details are as follows:
<script> //1.根据ID查询节点 var ul = document.getElementById("city"); var cd = document.getElementById("cd"); console.log(ul); console.log(cd); //2.根据标签名查询节点 //2.1在整个文档(document)内查询 console.log(document.getElementsByTagName("li")); //2.2在某个元素节点(element)内查询 console.log(ul.getElementsByTagName("li")); //3.根据name查询节点(基本都是给表单控件用的) console.log(document.getElementsByName("sex")); //4.根据层次查询节点 //获取已得到的节点的父亲、孩子和兄弟 //4.1获取父亲,返回的是单个值 console.log(cd.parentNode); //4.2获取孩子,返回的是多个值 //这种方式返回的节点是个数组,并且会把空格当做孩子放入数组中 console.log(ul.childNodes); //不带空格的获取孩子的节点 console.log(ul.getElementsByTagName("li")); //标准API中没有直接查询兄弟的方法, //必须通过查询父亲、查询孩子来实现查询兄弟, //下面的语句输出:上海 console.log(cd.parentNode.getElementsByTagName("li")[1]); </script>
jQuery: Use the jQuery selector directly to select elements and perform operations; please check out another article: jQuery selector https://blog.csdn.net/huang_yx/article/details/79686975 (click to open the link)
js: roughly divided into: 1. Reading and writing node names and types; 2. Reading and writing node content; 3. Reading and writing node attributes; 4. Reading and writing form controls The value of )/obj.html("123")
Read and write the text content of the node (subtags are not supported): Corresponds to point 2 of the above js
obj.text()/obj.text("123")
Read and write the attribute value of the node: corresponds to the third point of js above
obj.attr("Attribute name")/obj .val("Attribute name", "Attribute value")
Read and write the value attribute value of the node: corresponds to the 4th point of the above js
obj.val()/obj.val(" abc")
Note: obj represents jQuery object
Add and delete nodes: JS can only add and delete nodes through the parent node, but jQuery is much more convenient and has many corresponding api
js:
<script> //1.读取节点的名称和类型 //获取p1 var p1 =document.getElementById("p1"); console.log(p1.nodeName); console.log(p1.nodeType); //2.读写节点的内容(<p>内容</p>) //innerHTML:支持子标签 console.log(p1.innerHTML) console.log(p1.innerHTML = '单标签试一试') console.log(p1.innerHTML) //innerText:不支持子标签 var p2 = document.getElementById("p2"); console.log(p2.innerText); p2.innerText = "2.<u>查询</u>节点"; //3.读写节点的属性 //3.1.标准的API是下面的三个 //先取到这个节点 var img = document.getElementById("li"); console.log(img.getAttribute("src")); img.setAttribute("src", "../img/add.png"); img.removeAttribute("src"); //3.2.新的API(低版本浏览器不支持) //节点.属性名(class除外,要写成className) //注意点:.style和.className是标准的 var a = document.getElementById("baidu"); console.log(a.href); a.href = "undifined"; //4.读写表单控件的值 //input.value/input.value="" </script>
jQuert:
$("Node content");
$("you Good")
Insert node: Commonly used API
parent.append(obj): Add it 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 nodes: Common API
obj.remove(): Delete nodes
obj.remove(selector): Only delete nodes that satisfy the selector
obj.empty(): Clear nodes
Traverse nodes: some APIs corresponding to jQuery to facilitate node operations
children()/children(selector): direct child nodes
next()/next(selector): The next sibling node
siblings()/siblings(selector): All brothers
find(selector): Find all descendants that satisfy the selector
parent(): Parent node
Summary:
JS and jQuery operations on nodes It’s nothing more than adding, deleting, modifying, and checking, but jQuery is a js framework, and its core concept is: write less, do more; it greatly simplifies code writing. It encapsulates JS, CSS, and DOM, and provides a consistent and simple API, which is more convenient and faster to use, and the corresponding writing method is also simpler.
Related recommendations:
How to operate DOM elements in js Detailed explanation of DOM event flow in jsJavaScript Optimizing DOMThe above is the detailed content of Methods of manipulating DOM between JS and JQuery. For more information, please follow other related articles on the PHP Chinese website!