querySelector属性元素的简单介绍
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)