原生js获取dom对象的方法

最新推荐文章于 2024-09-10 10:22:59 发布

七日谭

最新推荐文章于 2024-09-10 10:22:59 发布

阅读量1.3k

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/Adollar/article/details/106163014

版权

js中的dom：（document object model 文本对象模型，简称dom元素），也可以将其看成HTML中的元素或标签。

动态获取方式：

动态获取其实就是在后续添加成代码时，它可以自动获取元素或标签。

document.getElementsByClassName() ：通过class类名称获取元素，返回的是一个集合（HTMLCollection）。
document.getElementsByName() ：通过元素（标签）的name属性获取元素，返回的是一个集合（NodeList）。
document.getElementById() ：返回的是单个对象，这也对应了id是唯一的。
document.getElementsByTagName() ：通过元素名称(标签名)获取，返回的是一个集合（HTMLCollection）。

注意：
在获取dom元素前，需要确认元素是否存在。
用动态方式获取元素时无论之后写的元素添加在哪个位置都能获取到。但是如果想要将获取结果显示出来，则需要将相应的显示代码写在要获取元素之后，否则无法显示。因为在js代码的运行过程中是从上到下、从左到右依次运行,会受运行顺序的影响。

<body>
	<button name="btninfo"  id="btn" class="list">按钮</button>
    <button name="btninfo" class="list">按钮</button>
    <button name="btninfo">按钮</button> 
    <button name="btninfo">按钮</button>
    <script>
    	var btn1=document.getElementsByClassName("list");//HTMLCollection（2）
    	console.log(btn1);
    </script>
    <button name="btninfo" class="list">按钮</button>
    <script>
    	console.log(btn1);//HTMLCollection（3）
    </script>
</body>

上述代码的运行结果：

静态获取方式：

静态获取只能获取到初始化时的元素，添加的元素获取不到。
静态获取的两个方法的参数和css中的选择器一致。（所以像元素的name属性之类的就不能用）

var btnq=document.querySelector() ：返回值为单个静态对象，而且是所要获取内容的第一个。
var btnq=document.querySelectorAll() ：多个静态对象获取，返回值为NodeList集合。

固定对象获取：

固定对象获取换而言之，就是对HTML页面及其中的页面结构进行获取。

	console.log(document.body);//对HTML中的body进行获取
    console.log(document.head);//对html中的head进行获取
    console.log(document.title);//对html中的title进行获取
    console.log(document.documentElement);//获取整个HTML