Methods of manipulating DOM between JS and JQuery

This article mainly shares with you how JS and JQuery operate DOM, mainly using code methods. I hope it can help everyone.

Query node:

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)

Reading and writing nodes:

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("45a2772a6b6107b401db3c9b82c049c212354bdf357c58b8a65c66d7c19c8e4d114")

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 = &#39;单标签试一试&#39;)
	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：

Create node:

$("Node content");

$("45a2772a6b6107b401db3c9b82c049c2you Good54bdf357c58b8a65c66d7c19c8e4d114")

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

prev()/prev(selector): The previous 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 js

JavaScript Optimizing DOM

The 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!