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("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 = &#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");

$("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

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:

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!