当前位置:网站首页>Acquisition of DOM learning elements JS
Acquisition of DOM learning elements JS
2022-04-23 09:27:00 【Small white egg tart】
Catalog
getElementById according to id To choose
getElementByTagName Select according to the tag name
DOM(Document Object Model) Document object model , yes W3C Organizations recommend ways to handle extensible markup languages (HTML or XML) Standard programming interface . Through these interfaces, you can change the content of the web page 、 Structure and pattern .
DOM Trees
How to get elements
getElementById according to id To choose
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// 4. It returns an object
console.dir(timer);
// 5. Print the element object we return , Better view the properties and methods inside .
getElementByTagName Select according to the tag name
// What is returned is the collection of obtained element objects , The resulting object is dynamic , Stored as a pseudo array , With length and index number , But no pop,push Other methods
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
console.log(lis.length);
// We want to print the element objects in turn , Take traversal
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// There is also a pseudo array in the page
// There is no such element , Returns an empty pseudo array
// obtain ol The inside can't pass document By parent element ( You must specify which element )
// var ol = document.getElementsByTagName('ol');
// The return is still a pseudo array [ol] Form cannot be our parent element
// console.log(ol[0].getElementsByTagName('li'));
// It's a lot of trouble We can give ol To specify a id id Is the only one.
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));
getElementByClassName Choose according to the name of the class , The class is xxx All will be selected
// Select according to the name of the class selector
console.log(document.getElementsByClassName('box'));
H5 New ways to get elements
querySelector You can choose according to the selector ( tag chooser , Class selectors ,id Selectors ) Choose the first element
If you want to use all
querySelectorAll
//querySelector(' Selectors '); According to the specified selection, it returns the first element object
// Class selection , label ,id...
// The selectors inside should be marked with their own selectors
console.log(document.querySelector('#nav'));
console.log(typeof document.querySelector('li'));
// 3querySelectorAll(' Selectors ') Returns all... According to the specified selector Pseudo array
console.log(document.querySelectorAll('.box'));
obtain body and html
1. obtain body, direct document.body
2. obtain html,document.documentElement
// 1. obtain body Elements
console.log(document.body);
var bod = document.body;
console.dir(document.getElementsByTagName('div'));
console.dir(bod); //object
//2. obtain html
console.log(document.documentElement);
版权声明
本文为[Small white egg tart]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204230624114184.html
边栏推荐
- Thread scheduling (priority)
- Leetcode-199 - right view of binary tree
- MySQL of database -- basic common query commands
- js 原型链的深入
- Go language learning notes - structure | go language from scratch
- 《數字電子技術基礎》3.1 門電路概述、3.2 半導體二極管門電路
- GoLand debug go use - white record
- 高薪程序员&面试题精讲系列91之Limit 20000加载很慢怎么解决?如何定位慢SQL?
- Codeforces Round #784 (Div. 4)
- Arbre de dépendance de l'emballage des ressources
猜你喜欢
Secrets in buffctf file 1
Summary of wrong questions 1
Notes on xctf questions
Principle of synchronized implementation
108. Convert an ordered array into a binary search tree
Kettle experiment (III)
Go language learning notes - structure | go language from scratch
Go language learning notes - exception handling | go language from scratch
Cross domain configuration error: when allowcredentials is true, allowedorigins cannot contain the special value "*“
Go language learning notes - slice, map | go language from scratch
随机推荐
Buuctf [actf2020 freshman competition] include1
Kettle实验 转换案例
Flink SQL realizes the integration of stream and batch
Installation of data cleaning ETL tool kettle
SAP 101K 411k inventory change
Go language learning notes - language interface | go language from scratch
Enter "net start MySQL" and "system error 5. Access denied" appears. Detailed explanation of the problem
Simple understanding of arguments in JS
搞不懂时间、时间戳、时区,快来看这篇
机器学习(六)——贝叶斯分类器
MySQL - Chapter 1 (data types in MySQL)
MySQL small exercise (only suitable for beginners, non beginners are not allowed to enter)
Your guide to lowering your cholesterol with TLC (continuously updated)
RSA encryption and decryption signature verification
Wechat applet catchtap = "todetail" event problem
Kettle实验 (三)
How to protect open source projects from supply chain attacks - Security Design (1)
MySQL小練習(僅適合初學者,非初學者勿進)
Using sqlmap injection to obtain the account and password of the website administrator
653. Sum of two IV - input BST