03.js-获取html中的元素对象

js获取html中的元素对象

一.通过id获取元素

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li class="wp">5</li>
    <li class="wp">6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>

let ul =document.getElementById('list');
ul.style.border='1px #f00 solid';

二、通过标签名获取元素

document.getElementsByTagName(‘标签名’)

特点：

1. 调用对象可以是 document之外的对象

• 如果通过 document 对象获取的标签，则是获取页面上所有的标签的对象
• 如果通过 其他对象获取的标签，则是获取该对象下所有的标签对象

2. 获取的元素的对象不仅仅是一个，可以有多个
3. 获取的标签对象存放在数组中，也就是该方法的返回值是一个数组

数组，在数组中可以存放任意类型的数据

let arr =[‘电影’,‘作业’,‘美食’,‘游戏’,2134,345,true];

数组的下标从0开始计算，因此如果需要从数组中获取内容则：
arr[内容对应的下标]

let li = document.getElementsByTagName('li');
console.log(li);
li[7].style.border ='2px #00f solid'

let li1 =ul.getElementsByTagName('li');
console.log(li1);
let arr =['电影','作业','美食','游戏',2134,345,true];
console.log(arr[3]);

li1[9].style.background='#ff0';

三、通过class类名获取元素

document.getElementsByClassName(‘class名’)

返回值是一个数组，数组中包含了所有具有该class名的元素对象

特点和 document.getElementsByTagName 一致

let liBox = document.getElementsByClassName('wp');
console.log(liBox);

liBox[3].style.background='#f00';

四、获取body的方法

1. document.getElementsByTagName(‘body’)[0]
2. document.body

let body1 = document.getElementsByTagName('body')[0];
body1.style.background='#666';

document.body.style.background = '#f60';