jquery 判断获得元素的类型是为div还是其他

jquery 判断获得元素的类型是为div还是其他,第1张

用开发者工具啊   具体流程如下 :   打开你的页面   F12然后  看到下面的框

然后打开sources栏进行如下 *** 作

go to file   PS:不同浏览器开发者工具不一样但是 *** 作都差不多自己尝试下就行了  我用的是谷歌  

然后搜索JS所在的页面  找到你要运行的JS   单击边缘如下:

然后可以在页面上运行 然后会跳转到单击点处  然后单击上面的按钮 一行行运行你可以看到有参数出现如下:

或者可以在里面选中也可以看到参数     

还有也可以把你语句放入Console 里面  回车 也可以获得参数如下:

在以往的工作当中,通常会遇到需要处理 DOM 的时候, DOM *** 作属于一个常规的范畴,我们可能需要通过它绑定一个事件、调整滚动条的位置、管理焦点、文本选择、媒体播放等等。

基于工程页面、逻辑复杂性、复用性等等因素可以选择合适的方案方便我们 *** 作 DOM 。

在页面比较简单和逻辑并不复杂的时候,我们可以根据实际情况选择比较简单的选择器方案;当工程逻辑较复杂的时候,我们要考虑组件的复用性、多人协作的不可控性等多种因素,选择方案的时候往往要考虑更多可能的场景。

如上所述,如果我们的使用场景单一,不需要复用的话,我们可以保证获取的 DOM 一致性的时候,可以考虑使用选择器获取 DOM 。

可以使用 documentgetElementXX 开头的方法:

可使用方法如下:

实际使用场景:

页面逻辑复杂的时候会有复用性的问题,如果使用 id 或者选择器就容易引发问题,这时我们可以选择使用 ref 。

ref 可以获取到相应的 DOM 节点,而且也可以得到详细信息,它得到的一个对象,包括 props,state 等。

React 会在组件挂载时给 current 属性传入 DOM 元素,并在组件卸载时传入 null 值。 ref 会在 componentDidMount 或 componentDidUpdate 生命周期钩子触发前更新。

ref 的值根据节点的类型而有所不同:

React 也支持另一种设置 refs 的方式,称为“回调 refs”。

不同于传递 createRef() 创建的 ref 属性,你会传递一个函数。这个函数中接受 React 组件实例或 HTML DOM 元素作为参数,以使它们能在其他地方被存储和访问。

React 将在组件挂载时,会调用 ref 回调函数并传入 DOM 元素,当卸载时调用它并传入 null。在 componentDidMount 或 componentDidUpdate 触发前,React 会保证 refs 一定是最新的。

父组件想要 *** 作子组件且没有控制权的时候可以选择使用 findDOMNode 。

findDOMNode 只在已挂载的组件上可用(即:已经存在 DOM 中的组件)。如果尝试调用未挂载的组件将会引发异常。

findDOMNode 不能用于函数组件。

如果组件已经被挂载到 DOM 上,此方法会返回浏览器中相应的原生 DOM 元素。此方法对于从 DOM 中读取值很有用,例如获取表单字段的值或者执行 DOM 检测。

当组件渲染的内容为 null 或 false 时,findDOMNode 也会返回 null。当组件渲染的是字符串时,findDOMNode 返回的是字符串对应的 DOM 节点。从 React 16 开始,组件可能会返回有多个子节点的 fragment,在这种情况下,findDOMNode 会返回第一个非空子节点对应的 DOM 节点。

DOM: Document Object Model,文档对象模型;js提供了丰富的api来 *** 作文档内容。

DOM树: html文档中的内容是以树形结构排布,html是DOM树根,html下只有两个子标签head、body

节点: DOM将所有的分支端都成为节点。节点有很多类型,常见的节点类型有:文本节点、元素节点。

可以通过 nodeType查看节点类型 : 1元素节点、3文本节点

特殊的元素节点:

1、html元素

2、body元素

3、head元素

节点 *** 作的api(属性和方法)

1、nodeName:只读属性,可以读取节点名称

2、nodeType:只读属性,读取节点类型

3、 hasChildNodes():判断调用方法的节点是否存在子节点,存在返回true,不存在返回false。

主流浏览器会将换行符、制表符、空格当做文本节点处理,IE9以下会忽略它们。

4、childNodes:只读属性,获得节点的子节点集合,子节点集合是一个类数组结构,有数组特点无数组方法

5、firstChild:获得节点的第一个子节点

6、lastChild:获得节点的最后一个子节点

7、querySelector():

参数:string类型,css选择器

作用:获得文档中第一个符合选择器条件的节点

兼容:在IE9以下不支持

8、 querySelectorAll(): // 获得的都是静态集合

参数:string类型,css选择器

作用:获得文档中所有符合选择器条件的节点集合(类数组结构)

兼容:在IE9以下不支持

注意: querySelector() 和 querySelectorAll() 得到的都是元素节点。

9、previousSibling:获取节点的前一个兄弟节点

10、nextSibling:获取节点的后一个兄弟节点

11、parentNode:获得节点的父节点(父节点一定是元素节点)

12、removeChild():节点删除它的指定子节点

DOM *** 作元素:暂时不用的隐藏、一定不用的删除。

13、cloneNode():克隆一个节点

参数:boolean类型,true深克隆,false浅克隆,默认浅克隆

深克隆:不仅克隆节点和节点的属性,还会克隆节点的子节点

浅克隆:只克隆节点和节点的属性,不会克隆节点的子节点

14、areplaceChild(b,c):用b替换c

其中a是c的父节点,c是文档上已经存在的节点,b可以是节点也可以是已存在节点,被替换的节点会从文档结构中删除。

15、areplaceWith(b):用b替换a

a已存在的节点,b可以是新节点也可以是已存在节点,被替换的节点从DOM树删除。

16、ainsertBefore(b,c):在c前面插入b

其中,a是c的父节点,c是已经存在的节点,b是新节点

17、aappendChild(b):在a末尾追加b

a是父节点,b是a的子节点, c是子节点

元素节点的相关api

1、getElementsByTagName():根据标签名获得元素集合(类数组结构)

区别:HTMLCollection 是动态集合,NodeList 是静态集合。

2、createElement():根据标签名创建新元素

3、id:读写属性,可以读取或设置元素的id值

4、className:读写属性,可以读取或设置元素的class值

5、classList:读取标签的类名集合(类数组结构)

add():为元素新增类名,如果类名已存在不会重复添加

remove():删除元素指定类名,如果类名不存在不会执行 *** 作

元素的属性分为两类:

一类是元素本里就拥有的属性,例如:id、class、style、src、herf、target、alt、title、type、value等等,这些属性可以在js中直接通过语法读取或设置。

再一类是我们为了解决问题给元素添加的自定义属性,这些属性在js中无法直接通过语法读取,需要通过 *** 作方法访问。

6、setAttribute(name,value)

参数:name表示要设置的属性名,value要为属性设置的值

无返回值

7、getAttribute(name)

参数:name表示要读取的属性名

返回值:返回属性的值,如果属性不存在会返回null

8、removeAttribute(name)

参数:name表示要删除的属性名

无返回值

说明:setAttribute()、getAttribute()、removeAttribute()都可以 *** 作元素的本地属性和自定义属性。

element拓展:

兼容:以下属性、方法在IE9以下不支持。

1、children:读取元素的所有元素子节点集合(类数组)

2、parentElement:读取元素的父元素节点

3、previousElementSibling:读取前一个元素兄弟节点

4、nextElementSibling:读取后一个元素兄弟节点

5、firstElementChild:读取第一个元素子节点

6、lastElementChild:读取最后一个元素子节点

7、remove(): 将调用方法的元素从DOM结构中删除

你好,

关于DOM的节点类型,在MDN上有明确的说明。

早期定义的节点类型总共有12种,分别将对应nodeType的值定义为1-12,经过长期发展,新标准中已经将其中一部分(2,

4,

5,

6,

12)弃用,其中最常用的是:1(普通元素节点)、3(文本节点)。

查看一个Node对象的节点类型:

var body = documentgetElementsByTagName('body')[0];

consolelog(bodynodeType);更多,更详细信息可以前往MDN查看:

>

以上就是关于jquery 判断获得元素的类型是为div还是其他全部的内容,包括:jquery 判断获得元素的类型是为div还是其他、React 中 *** 作 DOM 的方法、JS之DOM *** 作等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

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

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

发表评论

登录后才能评论

评论列表(0条)

    保存