DOM (二)

第八天

03-对象模型-第02天{表单属性、属性操作}

• 第八天
  • 表单属性
  • 大量拼接字符串
  • 仿京东搜索框
  • 排他思想
  • 全选反选
  • 自定义属性
    • 元素对象的自定义属性
    • 标签的自定义属性
    • 元素对象&&标签

表单属性

表单属性	作用	示例
type	设置input元素的类型
value	设置input元素的值
checked	设置input选择框是否选中
selected	设置下拉列表select中的option是否被选中	我被选中了没被选中我被选中了没被选中
disabled	设置input元素是否被禁用

大量拼接字符串

var btn = document.getElementById("btn");
var demo = document.getElementById("demo");
var inputs = demo.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
    inputs[i].value = i;
}
//大量拼接字符串很消耗性能
//大量拼接字符串用数组
btn.onclick = function () {
    var arr = [];
    for (var i = 0; i < inputs.length; i++) {
        //console.log(inputs[i].value);
        arr.push(inputs[i].value);
    }
    console.log(arr.join("-"));
    //join可以把数组中的字符串拼接
    //如果不传参 默认按照 , 拼接
};

仿京东搜索框

var txt = document.getElementById("txt");
//文本框获取焦点事件 onfocus
txt.onfocus = function () {
    //txt.value = "";
    //如果用户没有输入 才清空
    if (this.value === "这是什么❓") {
        this.value = "";
    }
};
//文本框失去焦点 onblur
txt.onblur = function () {
    //如果用户没有输入了文字 失去焦点后 才把默认文字加上
    if (this.value === "") {
        this.value = "这是什么❓";
    }
};

排他思想

全选反选

var all = document.getElementById("j_cbAll");
var tbody = document.getElementById("j_tb");
var checkboxes = tbody.getElementsByTagName("input");//下面的单选框
//点击all 让下面的的选中状态和all一致
all.onclick = function () {
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = all.checked;
    }
};

//让下面的影响上面
//点击每一个都判断 如果每一个都选中了 all就选中 否则不选中
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function () {
      var isCheckedAll = true;
      for (var i = 0; i < checkboxes.length; i++) {
          if (!checkboxes[i].checked) {
              isCheckedAll = false;
              break;
          }
      }
      all.checked = isCheckedAll;
  };
}

自定义属性

元素对象的自定义属性

• 可以像给对象定义属性一样,直接以点语法设置属性

  
  var box = document.getElementById("box");// 获取元素对象
  box.aaa = "bbb";// 设置属性
  
  

• 可以设置该元素对应的标签所拥有的属性,也可以设置没有的属性

  
  var box = document.getElementById("box");// 获取元素对象
  box.id = "cl";// div有id这个属性
  box.abc = “aaa”; // div没有abc这个属性,但是也可以设置成功
  
  

标签的自定义属性

• 设置标签属性: setAttribute()

  
  var box = document.getElementById("box");
  box.setAttribute("id","aaa");// 有规定的属性可以设置
  box.setAttribute("bbb","ccc");// 没有规定的属性也可以设置
  
  

• 获取标签属性

  
  var box = document.getElementById("box");
  box.getAttribute("id");// 有规定的可以获取
  box.getAttribute("aaa"); // 没有规定的也可以获取
  
  

• 移除标签属性

  
  var box = document.getElementById("box");
  box.removeAttribute("id"); // 有规定的可以删除
  box.removeAttribute("aaa"); // 没有规定的也可以删除
  
  

元素对象&&标签

• 给元素对象设置自定义属性,无法映射到对应的标签上
• 给标签设置自定义属性
  • 有规定的可以映射到元素对象上
  • 没有规定的无法映射到元素对象上
  • ie6/7/8都可以从元素对象上获取(特殊)
• 标签和对象的自定义属性 不会相互影响(IE678除外)