DOM常用操作总结

原创 2018-11-08 09:38:33 677
摘要:通过对DOM常用操作的学习,对DOM获取元素有了基本了解,通过上机操作加深了印象。//1.通过id获取元素的主要方法为: let eleId=document.getElementById(元素id) //然后再通过js控制css的方式方式来处理元素,如更改元素背景颜色为红色: eleId.style.backgroundColor="red"; //2.通过name

通过对DOM常用操作的学习,对DOM获取元素有了基本了解,通过上机操作加深了印象。


//1.通过id获取元素的主要方法为:
let eleId=document.getElementById(元素id)
//然后再通过js控制css的方式方式来处理元素,如更改元素背景颜色为红色:
eleId.style.backgroundColor="red";
//2.通过name属性获取元素的方法为:
let names=document.getElementsByName(标签name)
//获取到的names为数组,可通过循环遍历或者数组下标的方式,获取指定的name元素,并通过js修改相关的属性。操作方式主要有:
 //通过数组批量修改所有元素
 for (let i = 0; i < names.length; i++) {
        names[i].style.backgroundColor = 'blue';
    }
 //获取第二个元素
 let name2=names[0];   //获取方式1
 //let name2=names.item(0);  //获取方式2
 //3.通过标签名和属性选择元素:
//常用的可选择的标签名为:images(img标签),forms(form表单),links(a标签),获取images标签的属性为:
document.images[0].style.fontSize="16px";  //通过标签获取第一个img标签
document.images[name属性名].style.fontSize="18px";
//4.通过class属性获取元素
let menus= document.getElementsByClassName('menu');
//操作方式与name获取类似,都是获取到数组,通过循环或下标的方式修改元素。
//5.css选择器获取元素
var lis=document.querySelectorAll('li');//获取整个li集合
var li1=document.querySelector('li');//获取第一个li元素


批改老师:灭绝师太批改时间:2018-11-08 10:08:57
老师总结:注释的很清楚,可以带上实际案例试试看哦!

发布手记

热门词条