uni-app获取dom节点信息

uni-app获取dom节点信息,第1张

首先明白一点,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方法定义里面,不过你需要这样来调用。

有一定的JS基础后,就可以进入 dom 环节了,dom使得网页的交互效果得到完美呈现,可以说dom真正打开了网页和用户之间的通道桥梁,日常生活中我们点击鼠标,敲击键盘,甚至于无意间触碰到屏幕(触摸屏),都会或多或少或大或小的得到一些躲藏起来的内容。

打开淘宝,在输入框输入商品时,下拉的推荐商品:

或是当打开某个不想再浏览的网页时,右上角的那个×:

这些大部分都存在DOM的身影。

这里的“DOM”,通常来讲,叫做 DOM 文档对象模型 , 通过 *** 纵DOM,可以随意更改内容,样式,或者增删改查 ,因为网页是在浏览器中显示的,整个浏览器是BOM,所以DOM其实是BOM的一部分,BOM 就是 window对象 ,DOM 就是 document(文档)对象。

如果该元素,是网页的必备元素,而且只能有一个,可以通过document对象直接获取。比如:的src属性

任由我们怎么去修饰的显示,但它本身的路径属性是独有的,所以我们可以直接获取:

更多的时候,我要需要获取网页中的指定元素,这就需要专门的方法来获取了,这里列举几个方法:

getElementById()方法,根据元素的id属性值来获取指定的元素,因为ID的唯一性,使得该方法需要搭配ID选择器使用,如果网页里ID重复时,它会获取第一个:

getElementsByTagName()方法,根据元素的标签名获取所有该元素,该方法获取的是所有该标签的元素,以伪数组的形式呈现:

getElementsByClassName()方法,根据元素的类选择器名称获取所有该元素,该方法获取的途径是标签的类,也就是class属性,由于拥有该属性的标签可能不只一个,所以该方法获得的也是一个伪数组(还有,可以看方法名,凡是带Elements的大多数都是伪数组):

getElementsByName()方法,根据元素的name属性值获取所有该元素,相同的性质,有name属性的标签也不少:

querySelector()方法,根据选择器的名称返回元素,如果有多个元素,只返回第一个元素,这个方法就比较常用了,而且IE这个啥也不咋适配的浏览器现在几乎不咋能见到了,可以多多考虑用他了该方法是  ES6新增,无论是ID 还是class都可以选,但是和上面区别的是选ID时前面要加#号,选class时前面要加“”:

区别于Elements,这里是个单数,所以只会获取一个,要是想获取多个相同的,就用querySelectorAll()吧!querySelectorAll()看这个ALL就知道它是用来选全部的:

最后这俩方法更实用,可以选取CSS几乎所有选择器,而且querySelectorAll()得到的数组数据后还可以使用数组的方法。

*** 作DOM的样式 ,有多种方式:

通过style属性直接设置

通过className属性设置类选择器

也可以通过classList属性添加多个类选择器

*** 作DOM的内容:

innerText属性,用于获取 和 *** 作 DOM的文本内容。

innerHTML属性,用于获取 和 *** 作 DOM的HTML内容:

createElement()方法,用于创建DOM元素:

appendChild()方法,用于在当前DOM元素中添加子元素:

自删 remove()方法,是元素删除自己:

通过父级删除子级 removeChild()方法,是删除元素里面指定的子元素:

一、选取DOM元素

jQuery的核心是通过各种选择器,选中DOM元素,可以用querySelectorAll方法模拟这个功能。

var $ = documentquerySelectorAllbind(document);

这里需要注意的是,querySelectorAll方法返回的是NodeList对象,它很像数组(有数字索引和length属性),但不是数组,不能使用pop、push等数组特有方法。

二、DOM *** 作

DOM本身就具有很丰富的 *** 作方法,可以取代jQuery提供的 *** 作方法。

尾部追加DOM元素。

// jQuery写法

$(parent)append($(child));

// DOM写法

parentappendChild(child)

头部插入DOM元素。

// jQuery写法

$(parent)prepend($(child));

// DOM写法

parentinsertBefore(child, parentchildNodes[0])

删除DOM元素。

// jQuery写法

$(child)remove()

// DOM写法

childparentNoderemoveChild(child)

DEMO:

<select id="allName">

    <option value="zhangsan">张三</option>

    <option value="lisi">李四</option>

    <option value="wangwu" selected>王五</option>

    <option value="zhaoliu">赵六</option>

</select>

<input type="button" value="test" onclick="getSelectVal();"/><script>

    function getSelectVal(){

        //获取select dom对象

        var allSelect = documentgetElementById("allName");

        //获取select下拉框下所有的选项

        var optionArr = allSelectgetElementsByTagName("option");

        for(var i=0;i<optionArrlength;i++){

            if(optionArr[i]selected==true){

                alert(optionArr[i]value);

                return;

            }

        }

    }

</script>

你这是获取所有option中的值吗?

<script type="text/javascript">

var opts = documentgetElementById("store_list_id")childNodes;//获取option所有dom对象

for(var i = 0 ; i < optslength ; i++){

//排除空对象,alert(optsitem(i)innerHTML)显示option内的值。

if(optsitem(i)innerHTML!=undefined){alert(optsitem(i)innerHTML);}

}

</script>

页面加载时,因为没有任何选中项,所以 secondElementselectedIndex 值是 -1,secondElement

[-1]为undefined,所以alert()会d出 undefined 或 一个空的对话框;

如果你用鼠标选中了“选项9”,secondElementselectedIndex 值是 0,secondElement

[0]为"<option value="选项9">选项9</option>",所以alert()会d出 [object HTMLOptionElement]

把代码做一些修改:

<option value="选项9">选项9</option> 修改为

<option value="选项9" selected>选项9</option>

alert(secondElement[secondElementselectedIndex]); 修改为 alert(secondElement[secondElementselectedIndex]value);

以上就是关于uni-app获取dom节点信息全部的内容,包括:uni-app获取dom节点信息、DOM的理解与 *** 作、如何在jquery中 *** 作DOM等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址: https://outofmemory.cn/web/9722550.html

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

发表评论

登录后才能评论

评论列表(0条)

保存