通过原生js获取dom元素的九种方式

获取dom元素

<body><!-- <div id="box">我是一个DIV</div><p class="item">这是一个p标签1</p><p class="item">这是一个p标签2</p><span name="x1">我是一个span标签</span><span name="x1">我是一个span标签</span> --><h1 class="box1">hello DOM 1 ~</h1><h1 class="box1">hello DOM 2 ~</h1>
</body>

获取DOM元素：
通过JS获取页面中的元素，进行操作，js代码通常都写在

1） document.documentElement 得到整个文档（html元素）（较多使用）

 document.documentElement // 得到整个文档（html元素）let html = document.documentElement;console.log(html);

2）document.head 得到head元素

document.head //得到head元素let head = document.headconsole.log(head);

3）document.body 得到body元素

document.body //得到body元素let body = document.bodyconsole.log(body);

4） getElementById() 根据一个ID获取DOM元素（较多使用）

                  仅仅是获取一个，因为ID是唯一，如果有对应的ID，就获取这个元素，如果没有这个ID，得到null。

  getElementById() //根据一个ID获取DOM元素let div = document.getElementById("box")console.log(div);

5）document.getElementsByClassName() 根据class名字获取页面上的DOM元素（获取多个）

                  得到的是一个类数组（伪数组，长的像数组，本质不是数组），如果多个元素都有相同的class名字，得到多个DOM元素， 如果就一个标签有class名字，得到的也是一个伪数组，里面只有一个元素， getElementsByClassName 用的不多  对于低版本的浏览器兼容性不太好。

 document.getElementsByClassName()// 根据class名字获取页面上的DOM元素（获取多个）  得到的是一个类数组（伪数组）let ps = document.getElementsByClassName("item")console.log(ps);

6）let ps = document.getElementsByTagName(“p”);根据标签名来获取DOM元素（较多使用）

                  得到的也是一个伪数组  只要是一个伪数组，就可以通过下标得到具体的元素

document.getElementsByName() //根据标签名来获取DOM元素let ps = document.getElementsByTagName("p");console.log(ps);

7）document.getElementsByName() 根据标签上的name属性得到的对应的DOM元素

document.getElementsByName() //根据标签上的name属性得到的对应的DOM元素let spans = document.getElementsByName("x1")console.log(spans[0]);console.log(spans[1]);

8）document.querySelector(“选择器”); 根据选择器查找页面上对应的DOM元素（较多使用）

                  .box1是一个class选择器  如果有多个，得到的满足条件的第1个。

 document.querySelector("选择器"); // 根据选择器查找页面上对应的DOM元素， .box1是一个class选择器  如果有多个，得到的满足条件的第1个。let box = document.querySelector(".box1");console.log(box);

9）document.querySelectorAll(".box1") 获取多个元素也是一个伪数组（较多使用）

document.querySelectorAll(".box1") //获取多个元素 也是一个伪数组let h1s = document.querySelectorAll(".box1");console.log(h1s);

通过原生js获取dom元素的九种方式相关推荐

JS获取DOM元素的八种方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
vue获取dom元素的几种方式
在任意标签上:ref="xx" 获取dom元素:this.$refs.xx. 如图: mounted()时才能获取this.$refs.xx 获取dom标签:this.$refs. ...
原生js获取dom元素内容
<!DOCTYPE html> <html> <body><li><h3> <a href="/corp_index/tec ...
JS获取DOM元素的方法
什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程接口.简单理解就是HTML DOM 是关于如何获取.修改.添加或删除 ...
原生js获取html元素高度,原生JS获取元素宽高实践详解
开篇的话任何不是亲身实践中求得的知识,都不是属于你的. 任何求得的知识不去时常温习运用,也不是属于你的. 记录由来在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才 ...
原生js更改html,原生js更改css样式的两种方式
原生js更改css样式的两种方式发布时间:2020-08-30 01:46:17 来源:脚本之家阅读:148 作者:外婆的彭湖湾下面我给大家介绍的是原生js更改CSS样式的两种方式: 1. 通过 ...
vue.js -- 获取dom元素的样式(非行内样式)
在vue中获取dom元素的样式: this.$refs.menuList.style.top; 这种获取方式是只能获取到元素的行内样式的. this.$refs.menuList.getBoundin ...
class 原生js获取父元素_JS获取节点的兄弟,父级,子级元素的方法
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素原生的J ...
js获取dom元素的子元素,父元素,兄弟元素小记
原生js var a = document.getElementById("dom"); del_space(a); //清理空格 var b = a.childNodes; // ...

通过原生js获取dom元素的九种方式

获取dom元素

通过原生js获取dom元素的九种方式相关推荐

最新文章

热门文章