当前位置:网站首页>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
边栏推荐
猜你喜欢
What is augmented reality technology? Where can it be used?
小程序报错 :should have url attribute when using navigateTo, redirectTo or switchTab
Kettle experiment conversion case
ATSS(CVPR2020)
MySQL小練習(僅適合初學者,非初學者勿進)
#yyds干货盘点#ubuntu18.0.4安装mysql并解决ERROR 1698: Access denied for user ''root''@''localhost''
Failed to download esp32 program, prompting timeout
Vivo, hardware safe love and thunder
501. Mode in binary search tree
Go language learning notes - structure | go language from scratch
随机推荐
Creation of raid0 and RAID5 and Simulation of how RAID5 works
[boutique] using dynamic agent to realize unified transaction management II
MySQL小練習(僅適合初學者,非初學者勿進)
【SQL server速成之路】数据库的视图和游标
MySQL small exercise (only suitable for beginners, non beginners are not allowed to enter)
LGB, XGB, cat, k-fold cross validation
Operation not allowed for a result set of type resultset TYPE_ FORWARD_ ONLY. Explain in detail
ALV树(LL LR RL RR)插入删除
小程序报错:Cannot read property 'currentTarget' of undefined
108. 将有序数组转换为二叉搜索树
EmuElec 编译总结
Pre parsing of JS
Rembg split mask
RSA 加密解密签名验签
112. 路径总和
tsdf +mvs
[indexof] [lastIndexOf] [split] [substring] usage details
JS case to find the maximum value, reverse the array, bubble sort
亚马逊云科技入门资源中心,从0到1轻松上云
Vivo, hardware safe love and thunder