querySelector属性元素的简单介绍

http://www.itjxue.com  2023-01-04 18:51  来源:未知  点击次数: 

queryselectorall怎样获取元素

获取页面I属性D为test的元素:

document.querySelectorAll("#test")[0];

获取页面class属性为”red”的元素:

document.querySelectorAll('.red')

这里要注意的是:querySelector返回的是一个对象,而是返回的一个集合(NodeList)

js怎么通过class获取元素

根据你的需求,举例如下:

document.querySelector:获取首个(单个)符合条件元素

document.querySelector('.name');?//获取页面上首个class属性中包含name的元素。

document.querySelectorAll:获取全部符合条件元素

document.querySelectorAll('.name');?//获取页面上全部class属性中包含name的元素。

关于querySelector 选中元素

、、、

html lang="en"

head

meta charset="UTF-8"

titleDocument/title

/head

body

div

div id="aa"

div id="bb"

div id="cc"

div id="ll"/div

/div

/div

/div

div id="dd"

div id="ee"

div id="ff"

/div

/body

script

var div = document.querySelector("#aa").querySelectorAll('div div');

console.log(div)

/script

/html

、、、

document.querySelector()方法

HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持,也可以方便的获取DOM元素,语法跟jQuery类似。

获取文档中id=”container”的元素

注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。

参数类型可以为如下:

指定一个或多个匹配元素的 CSS 选择器。 可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。

对于多个选择器,使用逗号隔开,返回一个匹配的元素。

jquery中如何选择选取DOM元素?

一、选取DOM元素

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

var $ = document.querySelectorAll.bind(document);

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

二、DOM操作

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

尾部追加DOM元素。

// jQuery写法

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

// DOM写法

parent.appendChild(child)

头部插入DOM元素。

// jQuery写法

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

// DOM写法

parent.insertBefore(child, parent.childNodes[0])

删除DOM元素。

// jQuery写法

$(child).remove()

// DOM写法

child.parentNode.removeChild(child)

(责任编辑:IT教学网)

更多