表单属性操作、样式操作、全选按钮案例、tab栏案例、获取元素的方法、标签的自定义属性以及属性操作方法、假设成立法

一、表单属性操作

// 常见的表单属性有：disabled、type、value、checked、selected
// 布尔类型属性：checked（复选框默认选中）、 selected（下拉菜单选中）、 disabled（禁用）
//   只要写了上面的属性，就会生效
//   特征：
//    1. 在标签中来看，只要在标签中写了属性名，就可以起到对应的效果(不管值是啥，还是没有写值，都有效果)
//    2. 从DOM对象上看，这些属性的值都是布尔类型的（true、 false）

1、disabled（禁用）

// 需求：
        // 点击按钮，来禁用文本框（disabled）
<script>
        var inp = document.getElementById("inp");
        var btn = document.getElementById("btn");

        btn.onclick = function () {
            console.dir(inp);
            inp.disabled = true;
        }
</script>

2、随机下拉框选中

<script>
	// 思路：
    //  1. 找对象（btn、所有的option）
    //  2. btn注册click
    //  3. 随机的从所有的option中选中一个option （selected属性）
	var btn = document.getElementById("btn");
	var options = document.getElementsByTagName("option");
	btn.onclick = function () {
	var index = parseInt(Math.random() * options.length);
		options[index].selected = true;
	}
</script>

3、焦点事件

// 焦点事件获取 => focus
// 焦点事件失去 => blur
// 可做搜素框效果

二、假设成立法·

//  1. 先假设一个结果（立flag）
//  2. 验证假设是否成立（打脸）=>  挨个问：遍历每一项来看是否与立得flag相反（判断） ==> 说明假设错误

三、样式操作（style属性）

// 标签不仅可以通过class属性操作样式，还可以通过style属性操作样式。同样的DOM对象可以通过className操作样式，也可以通过style属性操作样式。

//1. style属性是一个对象，里面存储了所有行内样式对应的键值对。
//2. 如果样式的名字带了-，比如background-color,到了style对象中，变成了驼峰命名法，backgroundColor（因为-在js中不是一个合法的标识符）
//3. style属性只能获取和设置行内样式，在类样式中定义的样式通过style获取不到。

// 标签上可以有style，在dom对象中也会有style属性（一一对应）
// dom对象的style属性值是个对象，对象里面存储的是元素所有的行内样式
//  注意点：style 属性操作的行内样式（非行内样式获取不到）
// 例 box.style.width = "100px";
// 例 box.style.backgroundColor = "#f99";

// document常用属性
1. document.body  : body比较常用，并且在页面中时唯一的，因此可以使用document.body直接获取。
2. document.documentElement  : 可以获取html元素
3. document.head :  可以直接获取head元素
4. document.title :  可以直接获取title的文本

四、tab栏案例

// 排他思想  => 先干掉所有，再复活自己
// 获取当前元素的索引 => 先存后取
// 功能：
    //  1. 点击导航，需要排他
    //  2. 点击导航，还要排他内容div
    //      这块功能代码是需要放到 点击导航的事件处理函数中来写
// 思路：
    //  1. 找对象（li， 内容div）
    //  2. 给li注册click
    //  3. 排他li 
    //      先干掉所有人 ==> 去掉所有的li的now类名
    //      再复活我自己 ==> this添加now类名
    // 4、点击导航，还要排他内容div

五、全选按钮案例

// 思路：
// 1、先做点击全选按钮，其余的按钮都一起选中
//    让每一个按钮的checked = 全选按钮的checked
// 2、四个input选中，全选才选中
//   2.1 假设成立法
//   2.2 判断 => 挨个问，遍历
//   2.3 if成立，说明至少有一个没有被选中 ==> 假设错误 => 跳出循环
//   2.4 根据flag的值来控制全选的选中状态

六、获取元素的方法

// getElementsByClassName() => 根据类名来获取值 => 返回值：伪数组 => 参数：字符串类型类名
// getElementsByName() => 适用于表单元素 => 根据name属性来获取 => 返回值为伪数组

// 重点
// 根据CSS选择器来获取 => 类名、id、标签、子代、后代......等等
// document.querySelector() => 返回一个元素 => 参数可以写所有的CSS选择器
// document.querySelectorAll() => 返回伪数组 => 参数可以写所有的CSS选择器

七、标签的自定义属性以及属性操作方法

// 固有属性 => 标签本来就有的属性
// 自定义属性 => 自己定义的非固有属性  例：<div id="box" aa="bb"></div> => aa属性
// 作用：可以标签的自定义属性上存储数据
// 在html页面中，定义一个自定义属性,在对应的DOM对象中是不存在的，在DOM对象中只会存在固定的那些属性。

// 标签上的属性和dom对象的属性是一一对应的（仅限于固有属性）
// 1、getAttribute() => 获取标签的属性 => 参数：字符串类型的属性名
// 2、setAttribute(name, value) => 设置标签上的属性 (可以修改、新增自定义属性)  => 参数：字符串类型
// 3、removeAttribute(name) => 删除标签上的属性 => 参数为属性名

// 上面方法获取、设置、删除都是在标签上面操作的，dom对象上面不会显示。非固有属性里面标签属性与dom对象属性不是一一对应的。