Home Web Front-end JS Tutorial How to get node elements using JS

How to get node elements using JS

Jun 06, 2018 am 11:34 AM
js get

This article mainly introduces the simple method of obtaining node elements in JS, and analyzes the related operation techniques of javascript to obtain page node elements and modify element attributes in the form of examples. Friends in need can refer to the following

Examples of this article A simple way to get node elements in JS. Share it with everyone for your reference, the details are as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.jb51.net - JS几种获得节点元素的方法</title>
<script type="application/javascript">
  /* window.onload=function(){//文档就绪函数 表示当文档加载完成(图片视频等全部加载完成)
    var d=document.getElementById(&#39;d&#39;);
        //document.getElementByName();//得到数组  通过过下标调用
    d.innerHTML=&#39;asddddddddddd&#39;;
   //除通过Id查找(即getElementById)外其他几种查找方式返回的都是数组,通过下表调用
  }*/
  window.onload=function(){
    //找到Id为t1的td元素
    var t1=document.getElementById(&#39;t1&#39;);
    //获取父节点元素tr  通过parentNode
    var tr=t1.parentNode;
    //通过style属性设置背景颜色
    tr.style.backgroundColor=&#39;green&#39;;
    //获取tr标签的最后一个子元素
    var t3=tr.lastChild;
    //通过innerHTML属性改变元素内容
    t3.innerHTML=&#39;qwer&#39;;
  }
</script>
</head>
<body>
<table>
  <tr> <td id="">1</td>  <td>2</td>  <td>3</td> </tr>
  <tr> <td id="t1">1</td>  <td>2</td>  <td>3</td>  </tr
  <tr> <td>1</td>      <td>2</td>  <td>3</td>  </tr>
</table>
</body>
</html>
Copy after login

Operation effect:

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future. .

Related articles:

How to use the compile operation method in Vue

In element ui, the dialog box el-dialog close event ( Detailed tutorial)

How to implement the dialog box in vue

The above is the detailed content of How to get node elements using JS. 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)

Recommended: Excellent JS open source face detection and recognition project Recommended: Excellent JS open source face detection and recognition project Apr 03, 2024 am 11:55 AM

Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages ​​and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side

How to create a stock candlestick chart using PHP and JS How to create a stock candlestick chart using PHP and JS Dec 17, 2023 am 08:08 AM

How to use PHP and JS to create a stock candle chart. A stock candle chart is a common technical analysis graphic in the stock market. It helps investors understand stocks more intuitively by drawing data such as the opening price, closing price, highest price and lowest price of the stock. price fluctuations. This article will teach you how to create stock candle charts using PHP and JS, with specific code examples. 1. Preparation Before starting, we need to prepare the following environment: 1. A server running PHP 2. A browser that supports HTML5 and Canvas 3

Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS Dec 17, 2023 pm 06:55 PM

Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price

How to get the Crimson Abyss of War Double Pamish Lucia How to get the Crimson Abyss of War Double Pamish Lucia Mar 25, 2024 pm 05:31 PM

Players can obtain Lucia's Crimson Abyss when playing in Battle Double Pamish. Many players don't know how to obtain Lucia's Crimson Abyss. Players can obtain it through research and development, or redeem it at the Phantom Pain Cage store. How to obtain R&amp;D for Battle Double Pamish Lucia Crimson Abyss 1. Players can obtain it by drawing from the R&amp;D system, which includes the base card pool, the theme limited card pool and the destiny limited card pool. 2. Revealed in these card pools The basic drop rate of Sia Crimson Abyss is 1.50%, but if the player draws Lucia Crimson Abyss from the card pool, the drop rate will increase to 1.90%. Redemption in the Phantom Pain Cage Store 1. Players can redeem fragments of Lucia Crimson Abyss by using Phantom Pain Scars in the Phantom Pain Cage Store. 2. You can redeem up to 30 fragments every week.

How to obtain administrator rights in Win11 system How to obtain administrator rights in Win11 system Mar 08, 2024 pm 10:00 PM

It is very important to obtain administrator rights in the Win11 system, because administrator rights allow users to perform various operations in the system, such as installing software, modifying system settings, etc. Obtaining administrator rights in Win11 system can be achieved through the following methods: The first method is through user account control settings. In the Win11 system, User Account Control is a function used to manage user permissions. Through it, users can adjust their permission levels. To obtain administrator rights, users can enter the "Settings" interface and select "

How to get Phantom Beast Palu Wool How to get Phantom Beast Palu Wool Feb 03, 2024 pm 12:33 PM

There are various props and materials in the fantasy beast handkerchief, among which wool is an important resource. Wool can be used to make various props, but some players may not know how to obtain wool. Below I will introduce you to some methods of obtaining wool, I hope it will be helpful to you. How to obtain the wool of the fantasy beast Palu 1. The wool dropped by the palu can be obtained from a variety of palu, including Mian Youyou, Milufi, Melupa, Mao Shan'er, Mao Daddy, King Melupa and Ice Emperor. Melupa and seven other pallu. When fighting them, watch out for wool drops. 2. In addition to obtaining pasture production through combat, players can also easily produce wool in the pasture. The job adaptability in the game includes grazing pallu, such as Mianyouyou and Melupa. Wool can be harvested by grazing in the pasture.

How to get Eldon's Ring Torret How to get Eldon's Ring Torret Mar 11, 2024 am 11:40 AM

Torret is the spirit horse in the game Elden's Circle. Many players don't know how to obtain Torret of Elden's Circle. To summon Torret, players need to obtain the spirit horse whistle, which is equipped in the shortcut bar. After that, use the shortcut keys to summon the spirit horse Torret. How to obtain Torret of Eldon's Ring? Answer: You need to obtain the Whistle of the Spirit Horse. 1. Players need to obtain the Spirit Horse Whistle to summon Torret. 2. Players go from the novice birth point to the blessing point in front of the Storm Road, sit down by the campfire, and the heroine [Melina] will appear, and she will give you a [Spirit Horse Whistle] ring. 3. After players equip the "Spirit Horse Whistle" to the shortcut bar and then use the Spirit Horse Whistle, they can summon the soul of Thoret's horse. 4. After riding the spirit horse Torret, you can perform a double jump. You can jump while walking but cannot jump.

PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts Dec 18, 2023 pm 03:39 PM

With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese

See all articles