dom中如何理解根据标签名获取元素得到的是一个动态数组

dom中如何理解根据标签名获取元素得到的是一个动态数组,第1张

只在最开始获取了一次ul下的所有li元素,然后在ul下添加了一个li,最后输出ul下有几个li,发现有5个,得知documentgetElementsByTagName()是动态获取元素的

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

</head>

<body>

<ul id="ul1">

<li>111111111111</li>

<li>222222222222</li>

<li>333333333333</li>

<li>444444444444</li>

</ul>

<script type="text/javascript">

//获取所有的li元素

var aLi = documentgetElementsByTagName("li");

consolelog(aLi)//输出 此时ul中只有四个li元素

var ul = documentgetElementById("ul1");

//添加一个li到ul中

ulappendChild(documentcreateElement("li"));

//然后再输出 有5个li

consolelog(aLilength)

</script>

</body>

</html>

您好,HTML5规范文档中指出:如果一个元素符合下面两条规则中的任一条,则window对象中必须要有与之对应的一个属性,属性值就是这个对象

如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名

如果一个元素拥有name属性,那么name属性的属性值就会成为window对象的属性名但这个元素的标签名必须是: a, applet, area, embed, form, frame, frameset, iframe, img, object,其中的一个。

> "foo" in window

false

> typeof foo // 这个全局变量到底有木有

object

//错误控制台输出了下面的警告//Element referenced by ID/NAME in the global scope

//Use W3C standard documentgetElementById() instead

> foo

[object HTMLDivElement]

//错误控制台输出了下面的警告//Element referenced by ID/NAME in the global scope

//Use W3C standard documentgetElementById() instead> "foo" in window true

假设元素#a

那么可以得到:

let p = documentgetElementById('a');

let arr = pchildNodes;

首先明白一点,uni-app提供的view、button、image、text通通都是组件,不是h5的标签,虽然用起来方便,但如果你想获取dom节点信息,尽管给组件绑定一个id选择器,用documentgetElementById()等这种传统的JS获取dom方式是没有任何效果。

因为他们是组件,除非你不用这些现成的组件,用回h5的标签。

所以你如果想获取uni-app提供组件的DOM元素,需要如下的方法。

unicreateSelectorQuery()in(this);用于创建一个实例。

in(this)在这里是为了规范页面创建实例,避免获取不到实例报null,用上总没错

queryselect('#text')用于选择DOM节点

boundingClientRect()返回dom节点的相关信息

拿到的是一些元素本身的宽高信息、距离页面四边的距离。

使用unicreateSelectorQuery()创建dom实例,需要在这个mounted()生命周期里面进行,这个生命周期它代表组件已经创建完成,可以挂载实例,进而获取dom元素

如果不写在mounted生命周期里,你也可以写在methods方法定义里面,不过你需要这样来调用。

以上就是关于dom中如何理解根据标签名获取元素得到的是一个动态数组全部的内容,包括:dom中如何理解根据标签名获取元素得到的是一个动态数组、js获取已知id的DOM元素、DOM中如何获取一个元素的子元素等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9691071.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-01
下一篇 2023-05-01

发表评论

登录后才能评论

评论列表(0条)

保存