javaScript 选择器_PHP中文网手记

摘要：<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=

<!doctype html>

<html>

<head>

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

</head>

<body>

</ul>

</form>

<p><a href="http://www.php.cn" name="php">php中文网</a></p>

//(1).id属性,getElementById(),返回一个元素

let item = document.getElementById('item1');

//如果需要使用多个id来获取元素,可以通过函数来简化操作

function getElements () { //参数是多个id字符串

let elements = {}; // 创建一个空的map映射对象用来保存结果

for (let i = 0; i < arguments.length; i++) {

let id = arguments[i]; // 获取到要查询的每个id

let elt = document.getElementById(id); // 根据id查找元素

if (elt === null) {

throw new Error("No element with id: " + id); //抛出异常

}

elements[id] = elt; // 将获取到的元素存入到映射数据中

}

return elements; // 返回查询到的元素(以对象字面量方式)

}

//获取页面上指定的id属性的元素,返回一个关联数组类型的对象,键名就是id的值

let elements = getElements('item1','item2','item3');

for (let key in elements) {

elements[key].style.backgroundColor = 'coral';

}

//(2). name属性，getElementsByName()返回是一个NodeList节点列表,不只一个元素

//拥有name属性的元素不多,主要有表单,及表单中的元素,另外还有图像和内联框架

//form,input..., img, iframe

//name属性主要用于表单数据提交到服务器时,用来识别提交的内容

let login = document.getElementsByName('login')[0];

//还可以将name属性的值,当作docuemtn对象的属性来用,返回唯一元素

let login = document.login;

//(3). 标签名称，getElementsByTagName(),返回一个元素集合

//获取所有的li元素，返回一个html元素集合: HTMLCollection

let lists = document.getElementsByTagName('li');

for (let i = 0; i < lists.length; i++) {

lists[i].style.backgroundColor = 'lightpink';

}

//有length属性,可以当数组来访问

let ul = document.getElementsByTagName('ul')[0];

//元素集合也是一个对象,item()也可以获取指定元素

let ul = document.getElementsByTagName('ul').item(0);

ul.style.backgroundColor = 'lightblue';

//getElementsByTagName()不仅在document对象上有定义,在Element元素对象上也有定义

let item = ul.getElementsByTagName('li').item(1); // 在父元素上调用该方法,获取ul中的第二个列表项

item.style.backgroundColor = 'green';

//(4). class属性，getElementsByClassName(),返回一个html元素集合,与根据标签名获取的返回数据类型完全一样

let red = document.getElementsByClassName('red');

//该方法也支持在父元素上调用

document.getElementsByClassName('ul').item(0)

.getElementsByClassName('green').item(0)

.style.backgroundColor = 'green';

//支持多个class 属性值

let large = document.getElementsByClassName('coral large')[0];

large.style.backgroundColor = 'coral';

large.style.fontSize = '1.5rem';

//（5）//根据name标签名和name属性选择元素的快捷方式:仅适用于极少的几个,这是历史原因造成的

// images: 所有的<img>元素图像,数组, 有三种访问方式

document.images[0].style.width = '200px'; // 1.标签索引

document.images['pic'].style.width = '200px'; // 2.name 属性

document.images.pic.style.width = '300px'; // 3.将name视为元素对象的属性进行访问

// forms: 所有的<forms>元素表单,数组

document.forms[0].style.backgroundColor = 'lightgreen';

document.forms['login'].style.backgroundColor = 'lightblue';

document.forms.login.style.backgroundColor = 'red';

document.forms.item(0).style.backgroundColor = 'lightgreen'; // 类数组可用item()方法获取某个元素

//a 链接: 所有的<a>元素,NodeList 数组

document.links[0].style.backgroundColor = 'yellow';

document.links['php'].style.backgroundColor = 'red';

document.links.php.style.backgroundColor = 'green';

// body: <body>元素,总有定义,只有一个

document.body.style.backgroundColor = 'wheat';

// head: <head>元素,总有定义,不写会自动添加,只有一个

let style = document.createElement('style');

document.head.appendChild(style);

// documentElement: <html>元素,总有定义,同样一个页面只有一个

console.log(document.documentElement);

// doctype: 文档类型,同样也只有一个

console.log(document.doctype);

//(6). 根据匹配的css选择器来选择;

//我们选择页面元素的时候,大多使用css选择器来获取元素,例如

// .red 获取的元素,其实js也支持使用css选择器获取元素

let lists = document.querySelectorAll('li');

console.log(lists); //返回节点列表数组,里面每个元素对应一个元素

lists[0].style.backgroundColor = 'coral';

lists.item(1).style.backgroundColor = 'lightblue';

//该方法还可以在元素上调用,这也根据标签和class类名获取元素是一样的

let ul = document.querySelector('#ul'); // 返回满足条件的第一个元素

console.log(ul); // 只返回ul列表元素以及内部子元素

let li = ul.querySelectorAll('.green');

for (let i = 0; i < li.length; i++) {

li[i].style.backgroundColor = 'green';

}

</script>

</body>

</html>

批改老师：灭绝师太批改时间：2019-02-15 09:27:33
老师总结：光说不练假把式哦!这样写可不行,我需要你的练习代码

javaScript 选择器

热门词条