JavaScript APIs-第一天（B站黑马程序员）

一、获取元素

1. getElementById()

参数：大小写敏感的字符串string，返回的是一个元素对象。

var timer = document.getElementById('time');
console.log(timer); // return <div id="time">2019-9-9</div>
console.log(typeof timer); // trturn object

2. getElementsByTagName()

参数：标签名，返回的是获取的元素对象的集合，以伪数组的形式存储。

注意：如果页面中只有一个li,返回的还是伪数组的形式。如果页面中没有这个标签元素,返回的是空的伪数组的形式。

var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]); // 获取集合中的一个元素对象

依次打印里面的元素对象：遍历 

for (var i = 0; i < lis.length; i++) {
    console.log(lis[i]);
}

注意：父元素必须是指定的单个元素。

// 1. 错误情况
var ol = document.getElementsByTagName('ol'); // ol：伪数组
console.log(ol.getElementsByTagName('li')); //报错，因为父元素必须是指定的单个元素
console.log(ol[0].getElementsByTagName('li')); // 修改正确，父元素为伪数组中的单个元素

// 2.正确写法
var ol = document.getElementById('ol');
var li = ol.getElementsByTagName('li');
console.log(li);

3. getElementsByClassName()

参数：类名，返回的是获取的元素对象的集合，以伪数组的形式存储。

类似于getElementsByTagName()。

var boxs = document.getElementsByClassName('box');
console.log(boxs);

4. querySelector()

参数：选择器，返回指定选择器的第一个元素对象。

注意：里面的选择器需要加符号。eg. '.box', '#nav'

var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);

5. querySelectorAll()

参数：选择器，返回指定选择器的所有元素对象集合，是伪数组。

var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);

6. 特殊元素body和html的获取

a. body元素的获取

var bodyEle = document.body;

b. html元素的获取

var htmlEle = document.documentElement;

二、操作元素

1. 事件

a. 事件三要素

事件是由三部分组成：事件源、事件类型、事件处理程序（事件三要素）。

例如：点击一个按钮，弹出对话框。

1. 事件源：事件被触发的对象 -> 按钮
2. 事件类型：如何触发，什么事件，比如鼠标点击(onclick)、鼠标经过、键盘按下等
3. 事件处理程序：通过一个函数赋值的方式完成

//(1) 事件源：事件被触发的对象，按钮
var btn = document.getElementById('btn');
//(2) 事件类型：如何触发，什么事件， 比如鼠标点击(onclick)、鼠标经过、键盘按下
//(3) 事件处理程序：通过一个函数赋值的方式完成
btn.onclick = function () {
    alert('apple');
}

b. 执行事件步骤

例如：点击div，控制台输出'我被选中了'。

1. 获取事件源
2. 绑定事件：注册事件
3. 添加事件处理程序

// 1. 获取事件源
var div = document.querySelector('div');
// 2.绑定事件：注册事件
// div.onclick 
// 3.添加事件处理程序 
div.onclick = function () {
    console.log('apple');
}

2. 修改元素内容

a. innerText

innerText:不识别html标签，非标准，去除空格和换行。

var div = document.querySelector('div');
div.innerText = '今天是2024';
// div.innerText = '<strong>今天是：</strong> 2019'; 无法加粗，无法识别<strong>标签

b. innerHTML

innerHTML：识别html标签，W3C标准，保留空格和换行的。

var div = document.querySelector('div');
div.innerHTML = '<string>今天是：</string> 2019';

3. 修改常用元素属性

element.属性名

// 修改图片元素属性src
// 1. 获取元素
var ldh = document.querySelector('#ldh');
var zxy = document.querySelector('#zxy');
var img = document.querySelector('img');
// 2. 注册事件,处理程序
ldh.onclick = function () {
    img.src = 'images/ldh.jpg';
    img.title = '刘德华';
}
zxy.onclick = function () {
    img.src = 'images/zxy.jpg';
    img.title = '张学友';
}

4. 修改表单元素属性

input.属性名

注意：修改表单内容使用的是input.value，而不是innerHTML。

// 1. 获取元素
var btn = document.querySelector('button');
var input = document.querySelector('input');
// 2. 注册事件 处理程序
btn.onclick = function () {
    // input.innerHTML = '点击了'; 修改失败，innerHTML用来修改普通盒子,比如div标签里面的内容
    // 表单里面的值/文字内容是通过value来修改的
    input.value = '点击了';

    // 如果想要某个表单被禁用，不能再点击：disabled = 'true'
    // this:指向的是事件函数的调用者btn
    this.disabled = true;
}

5. 修改元素样式属性

a. element.style.样式名：直接修改行内样式

样式比较少或者功能简单的情况下使用。

// 1. 获取元素
var div = document.querySelector('div');
// 2. 注册事件 处理程序
div.onclick = function () {
    this.style.backgroundColor = 'purple';
    this.style.width = '250px';
}

b. 通过className属性修改内嵌样式

适合于样式较多或者功能复杂的情况。

var test = document.querySelector('div');
test.onclick = function () {
    // 通过修改元素的className更改元素的样式。适合于样式较多或者功能复杂的情况
    this.className = 'change'; // 当前元素的类名改为 change，覆盖原先类名

    // 如果想要保留原先的类名，多类名选择器
    this.className = 'first change';
}