Home Web Front-end JS Tutorial Summary of node attributes and operations under DOM_Basic knowledge

Summary of node attributes and operations under DOM_Basic knowledge

May 16, 2016 pm 06:53 PM
dom

Attributes:
1.nodeName
Node name, equivalent to tagName. Attribute nodes return the attribute name, and text nodes return #text. nodeName, is read-only.
2 .nodeType
Value: 1, element node; 2, attribute node; 3, text node. nodeType is read-only.
3 .nodeValue
Returns a string indicating the value of this node. Element nodes return null, attribute nodes return attribute values, and text nodes return text. nodeValue is readable and writable, but cannot be written to element nodes. Generally only used to set the value of text nodes.
4 .childNodes
Returns an array of child nodes. The childNodes of text and attribute nodes are always null. You can use hasChildNodes() to determine whether there are child nodes. Read-only attribute. To delete and add nodes, you cannot use the method of operating the childNodes array.
5 .firstChild
Returns the first child node. Text and attribute nodes have no child nodes and will return an empty array. This is a special treatment for these two nodes. For element nodes, null will be returned if there are no child nodes. There is an equivalent equation: firstChild=childNodes[0].
6 .lastChild
Returns the last child node. The return value is the same as firstChild. Please refer to the above for the three-party treatment. There is an equivalent equation: lastChide=childNodes[childNodes.length-1].
7 .nextSibling()
Returns the next sibling node of the node. If there is no next sibling node, return null. Read-only property and cannot be changed by the application.
8 .previousSibling()
Returns the previous sibling node of the node. Same as above.
9 .parentNode()
Returns the parent node of the node. document.parentNode() returns null. In other cases, it will return an element node, because only element nodes have child nodes, and any node other than document has a parent node. parentNode(), another read-only guy.


Operation:
1. Create node
createElement('tagName');
For example: var oP=document.createElement('p') ;Created a

tag.
2. Create text node
createTextNode('text');
For example: var oText=document.createTextNode('This is a paragh!');
3. Append child nodes
appendChild(o); where o is the node object.
For example: document.body.appendChildNode(o); append
document.forms[0].appendChildNode(o) at the end of the body; append
oP.appendChildNode(o); at the end of the form The inner end is appended, and its total oP is the node object.
4. Create document fragment
createDocumentFragment();
For example: var oF=document.createDocumentFragment();
5. Delete node
removeChild(oP);
For example: document.body.removeChild(oP), removes the oP ​​node object from the body.
6. Replace node
replaceChid(newOp, targetOp); Replace the target node targetOp with newOp
For example: document.body.replayChild(oPa,oPb).ps: How? So special? The source and destination operands are both parameters. Why is the caller document.body? Remember first, don’t interfere. ——What is replaced must be a child node of body. You can use other elements to replace document.body. The premise is the same. What is replaced must be a child node of this element.
7. Insert node
insertBefor(newOp,targetOp);
insertAfter(newOp,targetOp);
8. Set or get attribute node
setAttribute('key','value');
getAttribute('key','value')
9. Copy the node.
cloneNode(true/false)

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What are the ways to obtain DOM nodes in Vue3 What are the ways to obtain DOM nodes in Vue3 May 11, 2023 pm 04:55 PM

1. Native js gets the DOM node: document.querySelector (selector) document.getElementById (id selector) document.getElementsByClassName (class selector).... 2. Get the instance object of the current component in vue2: because each vue Each component instance contains a $refs object, which stores references to the corresponding DOM elements or components. So by default, the component's $refs point to an empty object. You can first add ref="name" to the component, and then pass this.$refs.

DOM manipulation guide in PHP DOM manipulation guide in PHP May 21, 2023 pm 04:01 PM

In web development, DOM (DocumentObjectModel) is a very important concept. It allows developers to easily modify and operate the HTML or XML document of a web page, such as adding, deleting, modifying elements, etc. The built-in DOM operation library in PHP also provides developers with rich functions. This article will introduce the DOM operation guide in PHP, hoping to help everyone. The basic concept of DOM DOM is a cross-platform, language-independent API that can

What does vue dom mean? What does vue dom mean? Dec 20, 2022 pm 08:41 PM

DOM is a document object model and an interface for HTML programming. Elements in the page are manipulated through DOM. The DOM is an in-memory object representation of an HTML document, and it provides a way to interact with web pages using JavaScript. The DOM is a hierarchy (or tree) of nodes with the document node as the root.

What is the reason why ref binding to dom or component fails in vue3 and how to solve it What is the reason why ref binding to dom or component fails in vue3 and how to solve it May 12, 2023 pm 01:28 PM

Vue3ref binding DOM or component failure reason analysis scenario description In Vue3, it is often used to use ref to bind components or DOM elements. Many times, ref is clearly used to bind related components, but ref binding often fails. Examples of ref binding failure situations The vast majority of cases where ref binding fails is that when the ref is bound to the component, the component has not yet been rendered, so the binding fails. Or the component is not rendered at the beginning and the ref is not bound. When the component starts to render, the ref also starts to be bound, but the binding between ref and the component is not completed. At this time, problems will occur when using component-related methods. The component bound to ref uses v-if, or its parent component uses v-if to cause the page to

What are the dom and bom objects? What are the dom and bom objects? Nov 13, 2023 am 10:52 AM

There are 5 DOM objects including "document", "element", "Node", "Event" and "Window"; 2. "window", "navigator", "location" and "history" and "screen" and other 5 BOM objects.

What is the difference between bom and dom What is the difference between bom and dom Nov 13, 2023 pm 03:23 PM

BOM and DOM are different in terms of role and function, relationship with JavaScript, interdependence, compatibility of different browsers, and security considerations. Detailed introduction: 1. Role and function. The main function of BOM is to operate the browser window. It provides direct access and control of the browser window. The main function of DOM is to convert the web document into an object tree, allowing developers to Use this object tree to obtain and modify the elements and content of the web page; 2. Relationship with JavaScript, etc.

What are the built-in objects of DOM? What are the built-in objects of DOM? Dec 19, 2023 pm 03:45 PM

dom内置对象有:1、document;2、window;3、navigator;4、location;5、history;6、screen;7、document.documentElement;8、document.body;9、document.head;10、document.title;11、document.cookie。

The latest summary of common JavaScript DOM events! The latest summary of common JavaScript DOM events! Aug 07, 2022 am 11:05 AM

This article summarizes the common events of JS DOM for everyone, which has certain reference value. Interested friends can refer to it.

See all articles