Home Web Front-end JS Tutorial Summary of basic operations of javascript dom_javascript skills

Summary of basic operations of javascript dom_javascript skills

May 16, 2016 pm 06:29 PM
dom Basic operations

I may encounter it often, so I summarize it as follows:
1. Creation of dom elements
2. Insertion of dom elements
3. Replacement of dom elements
4. Deletion of dom elements

First of all, there are some simple dom elements on the page


 
aaaaaaaa

bbbbbbbb

 
cccccccccc


Next we create a div Element, js code:
var div_d = document.createElement('div');
div_d.innerHTML = "dddddddd";
div_d.id = "d";
//innerText is not used here In order to avoid some problems caused by browser compatibility;
Then insert the created div with ID d in front of the div with ID B in the DOM element
var div_wrap = document.getElementById('wrap');
var div_b = document.getElementById('b');
div_wrap.insertBefore(div_d,div_b);
If you insert it directly behind the child element with the id of wrap, you can do this:
div_wrap.insertBefore( div_d,null);

If div_b is replaced, the following is as follows:
div_wrap.replaceChild(div_d,div_b);
Finally we delete the specified div
div_b with an element id of b .parentNode.removeChild(div_b);
or
document.body.removeChild(div_b);
There may be many derived methods and applications in the future. I will not continue to write them down for the time being

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)

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 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.

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.

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 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。

Basic operating skills of office ppt software Basic operating skills of office ppt software Mar 19, 2024 pm 07:52 PM

Many corporate employees usually use ppt for presentation when making project presentations. Making a ppt with pictures and text is more enjoyable to display. Therefore, ppt is as important to an office worker as word and Excel, and they are all necessary office software. It is very necessary to master some basic operating skills. 1. First, let us take a look at the menu bar in PPT. As you can see, the red frame is the function bar of PPT. Including "Start", "Insert", "Design", "Animation", "Slide Show", "Review", "View". In addition, in the upper left corner, the orange box "WPS Demo" also contains many commonly used functions. 2. Start "Start", its functions include many other menus

See all articles