一、操作 html 页面
document.getElementById('box'); // 选中一个id为box的标签
可以理解为
从文档里面 通过一个 id:box 来获取 一个元素
// => document 文档 ⇒ get 得到 ⇒ Element 元素 ⇒ By 通过 ⇒ id:box
二、操作标签内容：
innerHTML– 会解析标签
var box = document.getElementById("box");
box.innerTHML = "<p>我被添加到了盒子里面</p>";console.log(box.innerHTML); // <p>....</p>
innerText– 不会解析标签
var box = document.getElementById("box");
box.innerText = "<p>我会添加到box里面</p>";console.log(box.innerText); // 我会添加到box里面
三、变量：
- 变量的初始化
var name = 'mary';
var lastName = 'bob';
- 变量必须
先声明再赋值
a = 123;
console.log(a); // 123 -- 理论上是不可以的// 必须先声明再赋值
var a;
a = 123;// 或者直接一步到位
var a = 123;
- 声明变量，没赋值默认为
undefined
var a;
console.log(a); // undefined
- 变量不声明就使用会报错
console.log(a); // a is not defined
- 不使用
var声明的变量，会变成全局变量，挂到window对象上面
a = 123 === window.a = 123
- 变量多次赋值以最后一次赋值为准
var a = 132;
a = 465;
console.log(a); // 465
var定义多个变量，用逗号隔开
// bad
var a = 123;
var b = 456;
var c = 789;// good --> 规范的写法
var a = 123,b = 456,c = 789;
四、变量的命名规则
- 严格区分大小写
var abc = 123;
var ABC = 123;
// 这是两个不同的变量
- 见名知意
var fadfaf13 = 134423; × // 别人不知道你这是什么var inputValue = 131;
var keyCode = 65;
- 不能以数字开头，只能包含字母、下划线、数字和$(美元符)
var 1abc = 113; ×
var a1 = 123;
var _name = 133;
var $val = 123;
- 不能使用中文
var 你好 = 133; ×
- 不能使用 关键字(已经有了特殊功能的) 和 保留字(未来可能使用的文字)
var class = ...; ×
var var = ...; ×
- 必须遵守 驼峰命名法（大驼峰、小驼峰）
var myBox = ...;
var thisTemp = ...;
五、DOM操作之获取标签方法
- 通过
id获取
var box = document.getElementById("box");
- 通过
class获取
var aStu = document.getElementsByClassName("names");
- 通过
标签名获取
var aUl = document.getElementsByTagName("ul");
- 通过
name(表单)获取
var aName = document.getElementsByName("username");
- 获取
一堆标签中的第一个
var oLi = document.querySelector("#box > ul > li");
- 获取
一堆标签
var aLi = document.querySelector("#box > ul > li");
- 获取
html标签
var html = document.documentElement;
- 获取
body标签
var body = document.body;
- 获取
head标签
var head = doucment.head;
- 获取网页标题
title
var titleVal = document.title;
建议获取单个用
getEle.....获取多个用querySelectorAll
获取多个元素，最终得到的是一个元素数组，取的话用索引就可以了arr[0]
六、给元素添加样式：
Element.style.属性名 = 属性值
var box = document.querySelector('box');
box.style.display = 'none';
element.style.classText
box.style.classText = `width: 200px;height: 200px;background-color: red;margin: 10px 0 0 10px;
`;
样式属性比较多就用 classText ，样式少就直接加
Element.classList– 操作已经存在的 class
length⇒ 返回类列表里面类名的个数add()⇒ 添加一个或者多个类名remove()⇒ 移除一个或者多个类名toggle(class, [true | false])⇒ 第二个参数可选，用于强制添加或者移除类名，不管这个类名是否存在。为 true 就是添加，false 移除contains(class)⇒ 判断指定的类名是否存在，返回 true / falseitem(index)⇒ 返回索引对应的类名，从 0 开始
let title = document.querySelector('.title');
// 添加类
title.classList.add('red', 'pink', 'blue', 'green', 'yellow', 'purple', 'brown');
// 输出一共有多少个类名
console.log(title.classList.length); // 8
// 移除类名
title.classList.remove('red', 'pink');
console.log(title.classList.length); // 6
title.onclick = function () {// 切换类title.classList.toggle('show');
}
// 判断制定的类名是否存在
console.log(title.classList.contains('title'));
// 返回元素中索引值对应的类名
console.log(title.classList.item(0)); // title
)
)
)
)
)