常用的 HTML DOM 属性是什么

常用的 HTML DOM 属性是什么,第1张

常用的属性有,innerHTML属性、nodeName属性、nodeValue属性、nodeType属性等。

1、innerHTML属性,是获取元素内容的最简单方法。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。

2、nodeName属性,规定节点的名称。nodeName 是只读的。

3、nodeValue属性,规定节点的值。对于元素类型的节点,其nodeValue 是 undefined 或 null;对于文本类型的节点,其nodeValue 是文本本身;对于属性类型的节点,其nodeValue是属性值。

4、nodeType属性,返回节点的类型。nodeType 是只读的。比较重要的节点类型有,元素(类型值为1),属性(类型值为2),文本(类型值为3),注释(类型值为8),文档(类型值为9)。

扩展资料

1、DOM属性访问方式

可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。方法是您能够执行的动作(比如添加或修改元素)。属性是您能够获取或设置的值(比如节点的名称或内容)。

2、DOM其他属性

innerText属性设置或获取位于对象起始和结束标签内的文本,disabled属性获取表明用户是否可与该对象交互的值,nextSibling属性获取对此对象的下一个兄弟对象的引用,tagName属性获取对象的标签名称。

参考资料

百度百科-DOM

1、首先打开hbuilder软件,新建一个html文件,里面写入一个p标签和一个按钮标签。

2、然后在p标签的下方设置一个script标签,里面写入js胆码;先获取p标签和按钮的dom对象,然后给按钮添加一个点击事件,再点击事件爱的回调中alertp标签的text属性即可。

3、最后打开浏览器,可以看到一段文字和一个按钮,点击这个按钮。

4、就可以d出内容了。

componentDidMount() {

consolelog('22',ReactDOMfindDOMNode(thisrefsmode))

consolelog('22',ReactDOMfindDOMNode(thisrefsmode1))

}

<Modal title="Basic Modal" visible={true} ref="modal"

onOk={thisdel} onCancel={thisdel}

><div ref="modal1">

<p >some contents</p>

<p>some contents</p>

<p>some contents</p>

</div>

</Modal>

只能选到 modal1 选不到modal

不懂你获取dom元素 是那部分,如果是内部的可以,如查是 modal 框架的就不可以

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

假设元素#a

那么可以得到:

let p = documentgetElementById('a');

let arr = pchildNodes;

以上就是关于常用的 HTML DOM 属性是什么全部的内容,包括:常用的 HTML DOM 属性是什么、怎么用JS获取HTML标签内的内容、antd modal怎么获取dom元素等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址:https://54852.com/web/9652258.html

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

发表评论

登录后才能评论

评论列表(0条)

    保存