JavaScript获取DOM对象常用方法

获取DOM对象的常用方法有如下几种：

getElementById() 通过元素的ID属性获取DOM对象，获取的是一个DOM对象。

getElementsByTagName() 通过元素的标签名获取DOM对象，获取的是一组DOM对象。

getElementsByClassName() 通过元素的class属性获取DOM对象，获取的是一组DOM对象。

getElementsByName() 通过元素的name属性获取DOM对象，获取的是一组DOM对象。

样例代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p id="one">这是一个p标签</p><p class="first">这是一个p标签</p><p class="first" id="two">这是一个p标签</p><p name="username">这是一个p标签</p><p name="username">这是一个p标签</p><script>let oneObj = document.getElementById('one'); // 通过Id获取oneObj.style.color = 'red';     //只有第一个p标签字体变红色let twoObj = document.getElementById('two'); // 通过Id获取twoObj.style.color = 'blue';     //id为two的p标签字体变蓝色twoObj.style.background = 'gray';     //id为two的p标签背景颜色变为灰色let pArr = document.getElementsByTagName('p'); // 通过元素的标签名获取console.log("p标签的个数："+pArr.length);       //获取所有p标签对象，是数组，长度为5let firstArr = document.getElementsByClassName('first');  // 通过class获取console.log("class为first的对象个数："+firstArr.length);   //获取所有class为first的对象，是数组，长度为2let userArr = document.getElementsByName('user');console.log("name属性为user的对象个数："+userArr.length);    //获取所有name属性为user的对象，是数组，长度为0let userArr1 = document.getElementsByName('username');console.log("name属性为username的对象个数："+userArr1.length);    //获取所有name属性为username的对象，是数组，长度为2</script></body>
</html>

讲解都写到了注释里↑

效果截图：

写作不易，读完如果对你有帮助，感谢点赞支持！
如果你是电脑端，看见右下角的“一键三连”了吗，没错点它[哈哈]

加油！

共同努力！

Keafmd

JavaScript获取DOM对象常用方法相关推荐

JavaScript原生态获取DOM对象,获取属性值以及设置属性值
一.获取DOM对象(标签,元素,节点)的三种方法 1.document.getElementById(); 根据元素的id获取当前的标签例如 <p id="demo"& ...
vue怎么给html元素加类选择器,Vue.js——获取Dom对象的类选择器名(className)
方法一:通过监听器监听方法event参数获取dom对象代码: vue自定义指令 .pop{ width:100px; background-color:#ffff00; height:100px; ...
JavaScript操作DOM对象 Day05
JavaScript操作DOM对象 0 核心浏览器网页就是一个Dom树形结构! 获取Dom节点:得到Dom节点更新:更新Dom节点添加:添加一个新的节点删除:删除一个Dom节点要操作一个Do ...
JavaScript之DOM对象
JavaScript之DOM对象 DOM概述 (Element)元素节点对象获取Element对象操作Element对象及元素对象常见属性 value className checked inne ...
JavaScript中DOM对象的详解
*** JavaScript中DOM对象的详解*** DOM对象:Document Object Model,文档对象模型.也称为document(文档对象),是HTML页面当前窗体的内容,是连接JS ...
JavaScript 的DOM对象
JavaScript 的DOM对象 1.DOM对象的概念 1.DOM:文档对象模型(Document Object Model) 2.document对象,是DOM中的顶级对象,封装了HTML的相关属 ...
JavaScript基础——第三章，JavaScript操作DOM对象
JavaScript操作DOM对象 DOM:Document Object Model (文档对象模型) 节点和节点的关系访问节点使用getElement系列方法访问指定节点根据层次关系访问节点 ...
APIS——获取dom对象、操作元素内容和属性、间歇函数
APIS 变量声明 Web API基本认知作用和分类 DOM DOM树 DOM对象获取DOM对象根据CSS选择器来获取DOM元素(重点) 其它获取DOM元素方法(了解) 操作元素内容操作元素属 ...
JavaScript获取数组对象里面的键(key)和值(value)
JavaScript获取数组对象里面的键key和值value对象键值知识回调场景复现三种方法获取数组对象里的键值 1.Object.keys() 2.Object.entries(obj) 3. ...

JavaScript获取DOM对象常用方法

JavaScript获取DOM对象常用方法相关推荐

最新文章

热门文章