3 - 获取&操作元素、输出方式

一、传统基于操作DOM的方式实现业务需求

1. 想操作谁就先获取谁
2. 给某元素绑定某事件
3. 事件触发时修改元素的样式

给元素绑定事件：元素对象 .xxx = fucntion() {} 事件绑定：xxx 事件类型（click mouseover mousedown keydown）
元素对象 .style.xxx = xxx; 修改元素的某一个样式值，这种方式操作的是元素行内样式
元素 .style.xxx 就是获取某一个样式，如果我们没有把样式写在行内上，在 js 中基于 .style.xxx 的方式是无法获取到样式的

二、操作元素

• id: 操作元素的 id 值
• className：操作元素的 class 样式类的值
• innerHTML: 操作的元素的内容（可以识别标签）
• innerText：和 innerHTML 的区别就是不能识别标签
• tagName: 获取元素的标签名（一般大写）
• style：操作元素的行内样式 属性值是一个新的对象

合法属性与非法属性

合法属性

style 是一个类（class），类的原型上扩展了很多方法，可以看做普通 css 属性，class 里有的属性就是合法属性，没有的就是非法属性 可以通过 对象.属性名 的方式

注意 ：

1. 操作 class 的时候必须使用 className 因为 class 关键字被占用了
2. 操作 style 的时候获取 xxx.style 的时候是一个对象，如果想获取到 style 里面的内容必须使用 xxx.style.xxx

非法属性

类（style）里没有的属性就是非法属性，如 hhh = width;

获取：xxx.getAttribute(“属性名”);
设置：xxx.setAttribute(“属性名”);
删除: xxx.removeAttribute（”属性名”）;

注意：合法属性可以通过点操作改变也可以通过 setAttribute 等方法改变，非法属性只能通过 setAttribute 实现

三、常用输出方式

1.console.log / dir / table… 在控制台输出

• .dir：输出一个对象的详细键值对信息
• .table：把一个多维 JSON 数组在控制台按照表格的方式呈现出来
• console.log(a);
• console.dir(document.body);
• console.table(b);

2.浏览器窗口弹窗 alert / confirm / prompt 三种方式输出的结果都必先经过 toString 转换为字符串 alert(1); // ‘1’ 三种方式会阻断 JS 代码的执行，只有当窗口关掉，JS 才会继续运行

for (let i = 0; i < 5; i++) {
        alert(i);
    console.log('哈哈');
};

• 确定和取消：选择型弹框
• confirm (‘确定要干啥吗？’);
• 在 confirm 的基础上多了一个输入框
• prompt (‘确定要干啥吗？写出原因！’);

3.document.write 在页面中写入信息

• 和alert一样，输出的结果都是字符串

四、如何操作类名？

classList 返回所选元素的类名 是一个数组，一个类名就是一个索引

classList.add 添加一个类名
classList.remove 移除一个类名
classList.toggle 用来切换类名，有就删除，没有就添加
classList.contains 判断一个类型是不是存在，返回 true 或者 false<br />