Home Web Front-end JS Tutorial js traverse child node child element attachments and methods_javascript skills

js traverse child node child element attachments and methods_javascript skills

May 16, 2016 pm 04:39 PM
child element Traverse

Copy code The code is as follows:

// Delete all child nodes before adding child nodes

var usernameEle = document.getElementById("username");
var children = usernameEle.childNodes;
for(var i = children.length - 1; i >= 0; i--) {
usernameEle.removeChild(childs[i]);
}
var username = document.createTextNode(obj.username);
usernameEle.appendChild(username);

Properties:

nextSibling returns the next sibling node of the current node (read-only)
previousSibling returns the previous sibling node of this node (read-only)
parentNode returns the parent node (read-only)
childNodes stores the list of child nodes of the node (read-only)
nodeValue returns the text of the node (readable and writable)
Text returns the text content of this node and its descendants (readable and writable)
nodeName returns the name of the node (read-only)

Attributes stores the attribute list of the node (read-only)
dataType returns the data type of this node
Definition The definition of the node given in DTD or XML mode (read-only)
Doctype specifies the document type node (read-only)
documentElement returns the root element of the document (readable and writable)
firstChild returns the first child node of the current node (read-only)
Implementation returns XMLDOMImplementation object
lastChild returns the last child node of the current node (read-only)
nodeType returns the type of node (read-only)
nodeTypedValue stores node value (readable and writable)
ownerDocument returns the root document containing this node (read-only)
Parsed returns whether this node and its child nodes have been parsed (read-only)
Prefix returns the namespace prefix (read-only)
preserveWhiteSpace specifies whether to preserve whitespace (readable and writable)
url returns the URL of the recently loaded XML document (read-only)
Xml returns an XML representation of the node and its descendants (read-only)

Method:

getElementsByTagName returns a collection of elements with the specified name
appendChild adds a new child node to the current node and places it after the last child node
createElement creates an element node
createTextNode creates a text node containing the given data
removeChild removes the specified child node from the child node list
hasChildNodes returns whether the current node has child nodes

cloneNode returns a copy of the current node
createAttribute creates a new attribute
createCDATASection creates a CDATA section including the given data
createComment creates a comment node
createDocumentFragment creates a DocumentFragment object
createEntityReference creates EntityReference object
createNode creates a node of the given type, name and namespace
createPorcessingInstruction creates an operation instruction node
insertBefore inserts a child node before the specified node
Load imports the XML document at the specified location
loadXML imports the XML document of the specified string
replaceChild Replaces the specified child node from the child node list
Save Save the XML file to the specified node
selectNodes performs specified matching on nodes and returns a list of matching nodes
selectSingleNode performs a specified match on the node and returns the first matching node
transformNode transforms the node and its descendants using the specified stylesheet
transformNodeToObject Transforms a node and its descendants into objects using the specified stylesheet

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
3 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)

How to remove last child element in jQuery? How to remove last child element in jQuery? Feb 19, 2024 pm 09:40 PM

jQuery is a popular JavaScript library used to simplify many tasks in web development, including DOM manipulation. In web development, it is often necessary to add, delete, modify and check DOM elements, and deleting the last sub-element is also a common requirement. This article will introduce several methods to delete the last child element using jQuery. Method 1: Use the last() method. jQuery provides the last() method, which can select the last element of the current query result. By combining this

Understand the event bubbling mechanism: Why does a click on a child element affect the event of the parent element? Understand the event bubbling mechanism: Why does a click on a child element affect the event of the parent element? Jan 13, 2024 pm 02:55 PM

Understanding event bubbling: Why does a click on a child element trigger an event on the parent element? Event bubbling means that in a nested element structure, when a child element triggers an event, the event will be passed to the parent element layer by layer like bubbling, until the outermost parent element. This mechanism allows events on child elements to be propagated throughout the element tree and trigger all related elements in turn. To better understand event bubbling, let's look at a specific example code. HTML code: <divid="parent&q

Java how to loop through a folder and get all file names Java how to loop through a folder and get all file names Mar 29, 2024 pm 01:24 PM

Java is a popular programming language with powerful file handling capabilities. In Java, traversing a folder and getting all file names is a common operation, which can help us quickly locate and process files in a specific directory. This article will introduce how to implement a method of traversing a folder and getting all file names in Java, and provide specific code examples. 1. Use the recursive method to traverse the folder. We can use the recursive method to traverse the folder. The recursive method is a way of calling itself, which can effectively traverse the folder.

PHP glob() function usage example: traverse all files in a specified folder PHP glob() function usage example: traverse all files in a specified folder Jun 27, 2023 am 09:16 AM

Example of using PHPglob() function: Traverse all files in a specified folder In PHP development, it is often necessary to traverse all files in a specified folder to implement batch operation or reading of files. PHP's glob() function is used to achieve this requirement. The glob() function can obtain the path information of all files that meet the conditions in the specified folder by specifying a wildcard matching pattern. In this article, we will demonstrate how to use the glob() function to iterate through all files in a specified folder

Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3 Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3 Nov 20, 2023 am 11:20 AM

Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3. The specific code example is as follows: HTML code: &lt;divid="container"&gt;&lt;divclass="item"&gt ;First child element&lt;/div&gt;&lt;divclass="item"&

In-depth comparison of Java Iterator and Iterable: pros and cons analysis In-depth comparison of Java Iterator and Iterable: pros and cons analysis Feb 19, 2024 pm 04:20 PM

Conceptual differences: Iterator: Iterator is an interface that represents an iterator that obtains values ​​from a collection. It provides methods such as MoveNext(), Current() and Reset(), allowing you to traverse the elements in the collection and operate on the current element. Iterable: Iterable is also an interface, representing an iterable object. It provides the Iterator() method, which returns an Iterator object to facilitate traversing the elements in the collection. Usage: Iterator: To use Iterator, you need to first obtain an Iterator object, and then call the MoveNext() method to move to the next

How to use the os module to traverse files in a directory in Python 3.x How to use the os module to traverse files in a directory in Python 3.x Jul 29, 2023 pm 02:57 PM

How to use the os module to traverse files in a directory in Python3.x In Python, we can use the os module to operate files and directories. The os module is an important module in the Python standard library, providing many operating system-related functions. In this article, we will explain how to use the os module to iterate through all files in a directory. First, we need to import the os module: importos Next, we can use the os.walk() function to walk the directory.

Remove last child element of element using jQuery Remove last child element of element using jQuery Feb 26, 2024 pm 12:39 PM

How to remove the last child element using jQuery? In front-end development, we often encounter operations that require adding, deleting, modifying, and checking page elements. Among them, deleting the last child element is a common requirement. This article will introduce how to use jQuery to delete the last child element, with specific code examples. First, we need to introduce the jQuery library into the page to ensure that its functions can be used. Add the following code to your HTML file: &lt

See all articles