Home Web Front-end JS Tutorial JavaScript study notes (20) Obtaining and setting the characteristics (attributes) of elements_Basic knowledge

JavaScript study notes (20) Obtaining and setting the characteristics (attributes) of elements_Basic knowledge

May 16, 2016 pm 05:52 PM
element characteristic

This section of html takes the following as an example

Copy code The code is as follows:

1. Get and set element properties through the attributes of HTMLElement type (object)
Copy code The code is as follows:

var div = document.getElementById("myDiv");
var img = document.getElementById("img1");
var a = document.getElementById("myA");
//Get element properties
alert(div.id); //"myDiv"
alert(div.className); //"bd", this is not div.class, because class is a reserved keyword
alert(div.title); //"I am div"
alert( a.href); //http://www.baidu.com
//Set element properties
div.id = "myDiv2"; //Change id to "myDiv2"
div.className = "ft"; //class is changed to "ft". If there is a style named "ft", it will immediately change to the "ft" style, and the browser will respond immediately
div.title = "I am myDiv2" ; //Change title to "I am myDiv2"
div.align = "center"; //Set center alignment
img.src ="images/img1.gif"; //Set image path
a.innerHTML = "Sina"; //"Baidu" is changed to "Sina"
a.href = "http://www.sina.com.cn"; //Reset the hyperlink

2. Get, set, and remove the attributes of elements through the getAttribute(), setAttribute(), and removeAttribute() methods (not recommended, the first two methods have exceptions in IE6 and 7, and the third method IE6 Not supported, can be used when setting custom attributes)
getAttribute() method is used to obtain element attributes. It accepts one parameter, which is to get the attribute name of the element. The
setAttribute() method is used to set the attribute of the element. It accepts two parameters, namely to obtain the attribute name and attribute value of the element. The
removeAttribute() method is used to remove the attribute of the element. Accepts one parameter, which is the attribute name of the element to be removed
Copy code The code is as follows:

var div = document.getElementById("myDiv");
var img = document.getElementById("img1");
var a = document.getElementById("myA");
//Get element properties
alert(div.getAttribute("id")); //"myDiv"
alert(div.getAttribute("class")); //"bd", note that this is class, not className, Different from the above
alert(div.getAttribute("title")); //"I am div"
alert(a.getAttribute("href")); //http://www.baidu. com
//Set element attributes
div.setAttribute("id","myDiv2"); //Change id to "myDiv2"
div.setAttribute("class","ft"); / /class is changed to "ft", here it is also class, not className
div.setAttribute("title","I am myDiv2"); //title is changed to "I am myDiv2"
div.setAttribute ("align","center"); //Set center alignment
img.setAttribute("src","images/img1.gif"); //Set image path
//Remove element attributes
div.removeAttribute("class"); //Remove the class attribute

3. Get, set, and remove the attributes of the element through the attributes attribute
Copy code The code is as follows:

var div = document.getElementById("myDiv");
//Get element properties
alert(div.attributes["id"].nodeValue); //"myDiv"
//Set element attributes
div.attributes["id"].nodeValue = "myDiv2"; //id Change to "myDiv2"
//Remove element attributes
div.attributes.removeNamedItem("class"); //Remove class attributes
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)

Master the key concepts of Spring MVC: Understand these important features Master the key concepts of Spring MVC: Understand these important features Dec 29, 2023 am 09:14 AM

Understand the key features of SpringMVC: To master these important concepts, specific code examples are required. SpringMVC is a Java-based web application development framework that helps developers build flexible and scalable structures through the Model-View-Controller (MVC) architectural pattern. web application. Understanding and mastering the key features of SpringMVC will enable us to develop and manage our web applications more efficiently. This article will introduce some important concepts of SpringMVC

Choose the applicable Go version, based on needs and features Choose the applicable Go version, based on needs and features Jan 20, 2024 am 09:28 AM

With the rapid development of the Internet, programming languages ​​are constantly evolving and updating. Among them, Go language, as an open source programming language, has attracted much attention in recent years. The Go language is designed to be simple, efficient, safe, and easy to develop and deploy. It has the characteristics of high concurrency, fast compilation and memory safety, making it widely used in fields such as web development, cloud computing and big data. However, there are currently different versions of the Go language available. When choosing a suitable Go language version, we need to consider both requirements and features. head

Are there any class-like object-oriented features in Golang? Are there any class-like object-oriented features in Golang? Mar 19, 2024 pm 02:51 PM

There is no concept of a class in the traditional sense in Golang (Go language), but it provides a data type called a structure, through which object-oriented features similar to classes can be achieved. In this article, we'll explain how to use structures to implement object-oriented features and provide concrete code examples. Definition and use of structures First, let's take a look at the definition and use of structures. In Golang, structures can be defined through the type keyword and then used where needed. Structures can contain attributes

CSS transition effect: how to achieve the sliding effect of elements CSS transition effect: how to achieve the sliding effect of elements Nov 21, 2023 pm 01:16 PM

CSS transition effect: How to achieve the sliding effect of elements Introduction: In web design, the dynamic effect of elements can improve the user experience, among which the sliding effect is a common and popular transition effect. Through the transition property of CSS, we can easily achieve the sliding animation effect of elements. This article will introduce how to use CSS transition properties to achieve the sliding effect of elements, and provide specific code examples to help readers better understand and apply. 1. Introduction to CSS transition attribute transition CSS transition attribute tra

CSS transformation: how to achieve the rotation effect of elements CSS transformation: how to achieve the rotation effect of elements Nov 21, 2023 pm 06:36 PM

CSS transformation: How to achieve the rotation effect of elements requires specific code examples. In web design, animation effects are one of the important ways to improve user experience and attract user attention, and rotation animation is one of the more classic ones. In CSS, you can use the "transform" attribute to achieve various deformation effects of elements, including rotation. This article will introduce in detail how to use CSS "transform" to achieve the rotation effect of elements, and provide specific code examples. 1. How to use CSS’s “transf

How to use CSS to achieve an element's transparency gradient effect How to use CSS to achieve an element's transparency gradient effect Nov 21, 2023 pm 01:38 PM

How to use CSS to achieve the transparency gradient effect of elements In web development, adding transition effects to web page elements is one of the important means to improve user experience. The gradient effect of transparency can not only make the page smoother, but also highlight the key content of the element. This article will introduce how to use CSS to achieve the transparency gradient effect of elements and provide specific code examples. Using the CSS transition attribute To achieve the transparency gradient effect of an element, we need to use the CSS transition attribute. t

Master the key features and application scenarios of Golang middleware Master the key features and application scenarios of Golang middleware Mar 20, 2024 pm 06:33 PM

As a fast and efficient programming language, Golang is also widely used in the field of web development. Among them, middleware, as an important design pattern, can help developers better organize and manage code, and improve the reusability and maintainability of code. This article will introduce the key features and application scenarios of middleware in Golang, and illustrate its usage through specific code examples. 1. The concept and function of middleware. As a plug-in component, middleware is located in the request-response processing chain of the application. It is used

Is Go language compatible with C language features? Is Go language compatible with C language features? Mar 07, 2024 pm 03:24 PM

Go language is a programming language developed by Google. It has the characteristics of simplicity, efficiency, and concurrency support, and has gradually attracted widespread attention and application. In many cases, developers may need to interact with the C language or take advantage of the features of the C language. At this time, they need to consider whether the Go language is compatible with the features of the C language. This article will introduce the compatibility between Go language and C language, and provide specific code examples to illustrate the relationship between them. Features of Go language Go language is a statically typed, compiled, and concurrency-supported programming language.

See all articles