摘要：总结：--------------------------------------------------------使用id属性获取元素id属性需要在Document文档节点对象中引用语法：document.getElementById('id名称')可以直接获取到id元素并设置样式，比如：document.getElementById('id名称').style
总结：
--------------------------------------------------------
使用id属性获取元素
id属性需要在Document文档节点对象中引用
语法：document.getElementById('id名称')
可以直接获取到id元素并设置样式，比如：document.getElementById('id名称').style.color="red"
也可以把document.getElementById('id名称')赋值给变量，使用变量设置样式，比如：变量名.getElementById('id名称').style.color="red"
-----------------------------------------------------------
根据name属性来获取元素，
返回一个元素集合,有length属性,可以当数组来访问
拥有name属性的元素并不多,最常见的就是表单,以及表单中的元素,另外还有图像和内联框架,
语法：document.getElementsByName('name名')
返回的是数组
获取单个name的案例：
let login3 = document.getElementsByName('login')[1]; //获取到第2个name名为login的元素
login3.style.backgroundColor = 'green'; //并设置背景颜色
如果多个同名的name设置同一样式使用for循环遍历：
let login = document.getElementsByName('login'); //获取name名为login的元素，返回的是数组
for(let i=0;i<login.length; i++){ //使用for循环遍历整个name名为login的长度值
login[i].style.backgroundColor = 'yellow'; //设置样式
}
-------------------------------------------------------------------
根据标签名Tag来获取元素
getElementsByTagName(),根据标签名称获取元素,返回一个元素集合,有length属性,可以当数组来访问
设置单个标签名案例：写法1（使用数组下标）
let ul = document.getElementsByTagName('ul')[0]; //获取文档中第一个ul标签
ul.style.backgroundColor = 'lightgreen';
设置单个标签名案例：写法2 使用item()也可以获取指定元素
let ul1 = document.getElementsByTagName('ul').item(0); //获取文档中第一个ul标签
ul1.style.backgroundColor = 'lightblue';
获取所有同名元素时，使用for循环遍历：
let lists = document.getElementsByTagName('li'); //获取所有的标签名为li 的元素
for (let i = 0; i < lists.length; i++) { //遍历li元素的长度
lists[i].style.backgroundColor = 'red'; //所有的li元素设置背景色
}
-----
getElementsByTagName()不仅在document文档节点对象上有定义,在Element元素节点对象上也有定义
但是在父元素上调用该方法，先找到父级然后在找到第几个标签来设置。
案例：
let ul2 = document.getElementsByTagName('ul').item(0); // 获取ul 文档对象中第一个ul
item2.style.backgroundColor = 'green'; //设置样式
-----------------------------------------------------------------------------------------
使用标签名和name属性选择的快捷方式
据name标签名和name属性选择元素的快捷方式:仅适用于极少的几个:
<img>图片使用：images
<forms>表单使用：forms
<a>元素私用：links
他们都有三种访问方式：
方法1、标签索引 document.images[0].style.width = '200px'; //使用标签下标索引设置第一个图片的大小
方法2、name 属性 document.images['pic'].style.width = '200px'; //查找图片的name名为pic的的img标签，设置大小
方法3、将name视为元素对象的属性进行访问 document.images.pic.style.width = '300px'; //设置元素对象行为pic的img标准
方法4、数组可用item()方法获取某个元素document.images.item(0).style.width = '300px'; //设置第一个img图片
<forms>表单使用：forms 都可以使用上面4种写法
<a>元素私用：links 都可以使用上面4种写法
-----------
body元素、 head元素、html元素、doctype标签，同一个界面有一个，也可以使用name快捷属性获取：
// body: <body>元素,总有定义,只有一个
document.body.style.backgroundColor = 'wheat'; //设置网页的背景色
-----
// head: <head>元素,总有定义,不写会自动添加,只有一个
let style = document.createElement('style'); //在head中添加style元素
document.head.appendChild(style);
-----
// documentElement: <html>元素,总有定义,同样一个页面只有一个
console.log(document.documentElement); //在控制台中输出html元素内容
-----
// doctype: 文档类型,同样也只有一个
console.log(document.doctype); //在控制台中输出Doctype文档类型
------------------------------------------------------------------------------------------------------
通过class属性选取元素
返回一个html元素集合,与根据标签名获取的返回数据类型完全一样，,有length属性,可以当数组来访问。
getElementsByClassName('class名')
根据元素的class属性值获取元素语法：
let red = document.getElementsByClassName('class名'') //获取class属性
red[0].style.backgroundColor = 'red'; //设置第一个class
也可以直接写多个class属性
let large = document.getElementsByClassName('class名'')[0] //获取第一个class名为coral large的属性
large.style.backgroundColor = 'coral'; //设置多个样式
large.style.fontSize = '1.5rem';
获取同名class可使用for循环遍历：
let lists = document.getElementsByClassName('class名'); //获取class名
for (let i = 0; i < lists.length; i++) { //遍历整个class
lists[i].style.backgroundColor = 'red'; //设置整个class名
同时class属性选中元素，也支持在父元素上调用
document.getElementsByClassName('父级class名').item(0)
.getElementsByClassName('子class名').item(0)
.style.backgroundColor = 'green'; //设置子元素的背景色
--------------------------------------------------------------------------------
使用css选择器来获取元素
返回一个html元素集合,,有length属性,可以当数组来访问。
JS支持CSS选择器
document.querySelectorAll('标签名')
document.querySelectorAll('.class名')
document.querySelectorAll('#id名')
访问方法1：
当数组索引访问：document.querySelectorAll('标签名')[0].style.backgroundColor="red"; //索引标签名第一个元素设置背景色
document.querySelectorAll('标签名').item(0).style.backgroundColor="red"; //同上
该方法还可以在元素上调用,这也根据标签和class类名获取元素是一样的
querySelector('CSS选择器') 获取满足条件的第一个元素 等同于querySelectorAll('CSS选择器')[0]
案例：
let ul = document.querySelector('#ul'); // 获取满足条件的第一个元素
let li = ul.querySelectorAll('.green'); //获取满足条件的第一个元素（父元素）下的所有class名为.green的元素
for (let i = 0; i < li.length; i++) { //选好遍历class名为.green的元素的长度
li[i].style.backgroundColor = 'green'; //使用数组索引下标方法设置背景色
}
--------------------------------------------------------------
除了使用id属性获取元素以外，其他的根据name属性来获取元素、根据标签名Tag来获取元素、使用标签名和name属性选择的快捷方式、
通过class属性选取元素、使用css选择器来获取元素 都是返回一个html元素集合,,有length属性,可以当数组来访问。
访问方法：可以根据索引下标[0]来查找位置，或者使用.item(0)来获取位置，使用for循环遍历通条件的元素。
批改老师：韦小宝批改时间：2019-03-09 13:32:20
老师总结：写的非常不错 很详细 每个方法归纳的都很到位
