js—访问html中的对象

1、getElementById(idname) 返回拥有指定id的（第一个）对象的引用

<div id="box">小王</div>

JavaScript

var box = document.getElementById('box'); 
console.log(box);

控制台：

2、getElementsByTagName(tagname) 返回带有指定标签名的对象的集合

<ul id="list">
  <li>我是li元素0</li>
  <li>我是li元素1</li>
  <li>我是li元素2</li>
  <li>我是li元素3</li>
  <li>我是li元素4</li>
  <li>我是li元素5</li>
</ul>

JavaScript

var list = document.getElementById('list');
var liObj = list.getElementsByTagName('li'); 
console.log(liObj);
console.log(liObj[0]);

代码演示：

改变li元素的颜色

方法一：

liObj[2].style.backgroundColor = 'pink'; 
liObj[4].style.backgroundColor = 'skyblue';

方法二：

list.getElementsByTagName('li')[3].style.backgroundColor = 'yellow';

代码演示：

3、getElementsByName(name) 返回带有指定name指定名称的对象的集合
onfocus聚焦
onblur事件

<input type="text" name="username" id="" placeholder="请输入用户名">
<input type="text" name="username" id="" placeholder="请输入用户名">

JavaScript

var username = document.getElementsByName('username')[0];
console.log(username);
username.onfocus = function () {
  this.style.backgroundColor = 'skyblue';
}
username.onblur = function () {
  this.style.backgroundColor = 'orange';
}

代码演示：

4、getElementsByClassName() 返回带有指定class指定名称的对象的集合

<ol id="newOl">
  <li class="w">小王</li>
  <li class="w">小戴</li>
  <li>0625</li>
</ol>

JavaScript

var newOl = document.getElementById('newOl');
// var lis = newOl.getElementsByClassName('w');
// 如果找这个集合某一个指定元素，需要用到数组的方式写下标 
var lis = newOl.getElementsByClassName('w')[0]; 
console.log(lis);

如果类名一样，可以通过添加数组下标的方法来选择自己想要选中的元素

5、document.querySelectorAll返回带有指定标签名的对象的集合

<div id="wrap">
  <p>段落1</p>
  <p>段落2</p>
  <p>段落3</p>
  <p>段落4</p>
</div>

JavaScript

var wrap = document.querySelector('#wrap'); 
var pObj = wrap.querySelectorAll('p');
console.log(pObj);

代码演示：

6、all[]的用法：document.all[]这个数组可以访问文档中所有元素。

<h1>小戴</h1>

JavaScript

console.log(document.all[7]);
var aObj = document.all;
for (var i = 0; i <= aObj.length - 1; i++) {
  console.log(aObj[i]);
}
aObj[7].style.fontSize = '30px';
aObj[7].style.color = 'orange';

代码演示：