Summary of node attributes and operations under DOM_Basic knowledge
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
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)

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

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.

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

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.

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

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.

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.

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。

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