Home Web Front-end JS Tutorial Introduction to DOM and nodes, attributes, and search nodes

Introduction to DOM and nodes, attributes, and search nodes

Jan 18, 2018 pm 02:45 PM
Attributes Find node

This article mainly shares with you a detailed introduction to DOM, nodes, attributes, and methods of finding nodes. It has a very good reference value. Let’s follow the editor to take a look. I hope it will be helpful to everyone. I hope it can help. to everyone.

DOM (Document Object Modle) Programming interface for operating documents

DOM defines methods for representing and modifying documents. The css style sheet cannot be modified. Use DOM methods in js to change the css style of elements. , essentially adding inline styles to the element.

The DOM object is the host object, which is used to operate a collection of HTML and xml functional objects. xml——>xhtml——>html4.0——>html5

The difference between HTML and xml: There is basically no difference except that xml can customize tags.

Document, when written alone, represents the entire document, implicitly written on the upper level of the html tag, which is just the root tag in the document.

Note: BOM and DOM grouped things are array-like, not arrays.

Method to get the element:

getElementById();

Browsers below IE8 do not distinguish the case of the id value, and match the attribute value of the element's name. Since the id value will be modified in the background, try not to use it or use it less.

getElementsByTagName(); tag name, all browsers support

getElementsByClassName(); browsers IE8 and below do not support

getElementsByName(); in older versions , only the name of the tag that can submit the request will take effect (form, form element, img, iframe)

document.querySelector(); css selector, IE7 and below are not compatible, and are not real-time.

document.querySelectAll();

Node type:

Element node 1

Attribute node 2

Text (text) node 3 // Text, spaces, carriage returns, etc. are all text nodes

Comment node 8

document node 9

documentfragment 11

Traverse Number of nodes:

parentNode is the parent node of the child node. The final parentNode node is the document node.

childNodes All child nodes of the parent node, element nodes, comment nodes, text nodes

firstChild first child node

lastChild last child node

nextSibling Next sibling node

previousSibling Previous sibling node

Number of traversed element nodes: (except children nodes, others are incompatible with IE9 and below)

parentElement The parent element node of the element. The final parent element node is the html element, and the document is a self-contained node.

children are the child nodes of the element under the parent element.

node.childElementCount === node.children.length The number of element child nodes of the current child node. Use children.length.

firstElementChild The first element child node

lastElementChild The last element child node

nextElementSibling, previousElemnetSibling

Four properties of the node:

nodeName Except for element nodes, the returned results have a '#' in front of them, and element nodes return uppercase tag names, and the types are read-only.

nodeValue is only used for text nodes and comment nodes, and can be read and written.

nodeType returns a number, which represents the corresponding node type. Read-only

attributes The attribute collection of the element node.

node.hasChildNodes() method determines whether there are child nodes in the parent node, and the return result is a Boolean value.

Related recommendations:

Several jQuery methods to find dom

React operates the real DOM to achieve dynamic bottom sucking

Example sharing JQuery selector and DOM node operation exercises

The above is the detailed content of Introduction to DOM and nodes, attributes, and search nodes. For more information, please follow other related articles on the PHP Chinese website!

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

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

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 turn off Find My iPhone How to turn off Find My iPhone Nov 09, 2023 pm 02:21 PM

What happens when you turn off Find My on iPhone? Find My iPhone helps you locate a lost or stolen device. When enabled, Find My iPhone lets you track your device's location on a map, plays sounds, and helps you find your device. Find My also includes an Activation Lock to prevent anyone from using your iPhone. When you turn off Find My iPhone, you lose all these features, which may make recovering a lost Apple device difficult. While Find My iPhone is very useful, you should disable it when you want to sell, donate, trade in your phone, or send it for battery replacement or any other service. Doing this will ensure that no one can access information about you

Find the index of an element in an array using the Array.IndexOf function in C# Find the index of an element in an array using the Array.IndexOf function in C# Nov 18, 2023 am 09:59 AM

Use the Array.IndexOf function in C# to find the index of an element in an array. In a C# program, when we need to find the index of an element in an array, we can use the Array.IndexOf function. The Array.IndexOf function finds the specified element within the specified array range and returns the index of its first occurrence. If the element is not found, -1 is returned. The following is a sample code that demonstrates how to use the Array.IndexOf function to find an element in an array.

How to check the hard disk serial number and mac address How to check the hard disk serial number and mac address Feb 18, 2024 pm 07:45 PM

Hard drive serial numbers and MAC addresses are important identifiers in computer hardware and are very useful in managing and maintaining computer systems. This article will introduce how to find the hard disk serial number and MAC address. 1. Find the hard drive serial number. The hard drive serial number is a unique identifier used by the hard drive manufacturer to identify and track the hard drive. In different operating systems, the method of finding the hard drive serial number is slightly different. Windows: Open Command Prompt (search for "cmd" in the Start menu) and enter the following command and press Enter: wmicdisk

4 Ways to Turn Off Find My on iPhone 4 Ways to Turn Off Find My on iPhone Feb 02, 2024 pm 04:15 PM

Apple's Find My app allows you to locate your iPhone or other device to prevent it from being lost or forgotten. While Find My is a useful tool for tracking devices, you may want to disable it if you're concerned about privacy issues, don't want to drain your battery, or for other reasons. Fortunately, there are several ways to turn off Find My on iPhone, all of which we will explain in this article. How to Turn off Find My on iPhone [4 Methods] You can turn off Find My on iPhone in four ways. If you used Method 1 to turn off Find, you can do this from the device you want to disable it on. To proceed with methods 2, 3, and 4, the iPhone that you want to turn off Find Finder should be powered off or

Python's dir() function: View the properties and methods of an object Python's dir() function: View the properties and methods of an object Nov 18, 2023 pm 01:45 PM

Python's dir() function: View an object's properties and methods, specific code example required Summary: Python is a powerful and flexible programming language, and its built-in functions and tools provide developers with many convenient features. One of the very useful functions is the dir() function, which allows us to view the properties and methods of an object. This article will introduce the usage of the dir() function and demonstrate its functions and uses through specific code examples. Text: Python’s dir() function is a built-in function.

The glob() function in PHP is used to find files or directories The glob() function in PHP is used to find files or directories Nov 18, 2023 pm 06:17 PM

The glob() function in PHP is used to find files or directories and is a powerful file operation function. It can return the path of a file or directory based on a specified pattern match. The syntax of the glob() function is as follows: glob(pattern, flags) where pattern represents the pattern string to be matched, which can be a wildcard expression, such as *.txt (matching files ending with .txt), or a specific file path. flags is an optional parameter used to control the function

How to find the serial number of your computer hard drive How to find the serial number of your computer hard drive Feb 20, 2024 am 10:33 AM

How to Check the Serial Number of a Computer Hard Drive With the development of computer technology, computer hard drives have become an indispensable part of our lives. Whether it is storing important files or installing operating systems and software, you need to rely on the hard disk to complete it. Understanding some basic information about the computer hard drive, such as the hard drive's serial number, can help us better manage and maintain the computer system. So, how to check the serial number of a computer hard drive? This article will introduce several common methods. Method 1: Use the command line tool that comes with Windows system Windows system

How to write a hash lookup algorithm in Python? How to write a hash lookup algorithm in Python? Sep 21, 2023 pm 02:37 PM

How to write a hash lookup algorithm in Python? Hash search algorithm, also known as hash search algorithm, is a data search method based on hash table. Compared with traditional search algorithms such as linear search and binary search, the hash search algorithm has higher search efficiency. In Python, we can use a dictionary to implement a hash table and then implement a hash lookup. The basic idea of ​​the hash search algorithm is to convert the keyword to be searched into an index value through a hash function, and then search it in the hash table based on the index value.

See all articles