DOM (二)

第八天

03-對(duì)象模型-第02天{表單屬性、屬性操作}

表單屬性

表單屬性 作用 示例
type 設(shè)置input元素的類型 <input type="text"><input type="text">
value 設(shè)置input元素的值 <input type="text" value="123"><input type="text" value="123">
checked 設(shè)置input選擇框是否選中 <input type="radio" checked="checked"><input type="radio" checked="checked">
selected 設(shè)置下拉列表select中的option是否被選中 <select><option selected="selected">我被選中了</option><option>沒(méi)被選中</option></select><select><option selected="selected">我被選中了</option><option>沒(méi)被選中</option></select>
disabled 設(shè)置input元素是否被禁用 <input type="text" disabled="disabled" value="我被禁用了"><input type="text" disabled="disabled" value="我被禁用了">

大量拼接字符串

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;
}
//大量拼接字符串很消耗性能
//大量拼接字符串用數(shù)組
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可以把數(shù)組中的字符串拼接
    //如果不傳參 默認(rèn)按照 , 拼接
};

仿京東搜索框

var txt = document.getElementById("txt");
//文本框獲取焦點(diǎn)事件 onfocus
txt.onfocus = function () {
    //txt.value = "";
    //如果用戶沒(méi)有輸入 才清空
    if (this.value === "這是什么???") {
        this.value = "";
    }
};
//文本框失去焦點(diǎn) onblur
txt.onblur = function () {
    //如果用戶沒(méi)有輸入了文字 失去焦點(diǎn)后 才把默認(rèn)文字加上
    if (this.value === "") {
        this.value = "這是什么???";
    }
};

排他思想

<input type="button" value="按鈕"/>
<input type="button" value="按鈕"/>
<input type="button" value="按鈕"/>
<input type="button" value="按鈕"/>
<script>
    //點(diǎn)擊當(dāng)前按鈕 只讓當(dāng)前按鈕亮起來(lái)
    var inputs = document.getElementsByTagName("input");
    //給每一個(gè)都綁定事件
    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = function () {
            //讓當(dāng)前按鈕亮起來(lái)
            //this.className = "highlight";
            //排他思想:干掉所有人留下我自己
            //干掉所有人 讓所有人的類名是空
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].className = "";
            }
            //留下我自己 讓當(dāng)前這個(gè)的類名變?yōu)閔ighlight
            this.className = "current";
        };
    }
</script>

全選反選

var all = document.getElementById("j_cbAll");
var tbody = document.getElementById("j_tb");
var checkboxes = tbody.getElementsByTagName("input");//下面的單選框
//點(diǎn)擊all 讓下面的的選中狀態(tài)和all一致
all.onclick = function () {
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = all.checked;
    }
};

//讓下面的影響上面
//點(diǎn)擊每一個(gè)都判斷 如果每一個(gè)都選中了 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;
  };
}

自定義屬性

元素對(duì)象的自定義屬性

  • 可以像給對(duì)象定義屬性一樣,直接以點(diǎn)語(yǔ)法設(shè)置屬性

    <div id="box"></div>
    var box = document.getElementById("box");// 獲取元素對(duì)象
    box.aaa = "bbb";// 設(shè)置屬性
    
    
  • 可以設(shè)置該元素對(duì)應(yīng)的標(biāo)簽所擁有的屬性,也可以設(shè)置沒(méi)有的屬性

    <div id="box"></div>
    var box = document.getElementById("box");// 獲取元素對(duì)象
    box.id = "cl";// div有id這個(gè)屬性
    box.abc = “aaa”; // div沒(méi)有abc這個(gè)屬性,但是也可以設(shè)置成功
    
    

標(biāo)簽的自定義屬性

  • 設(shè)置標(biāo)簽屬性: setAttribute()

    <div id="box"></div>
    var box = document.getElementById("box");
    box.setAttribute("id","aaa");// 有規(guī)定的屬性可以設(shè)置
    box.setAttribute("bbb","ccc");// 沒(méi)有規(guī)定的屬性也可以設(shè)置
    
    
  • 獲取標(biāo)簽屬性

    <div id="box"></div>
    var box = document.getElementById("box");
    box.getAttribute("id");// 有規(guī)定的可以獲取
    box.getAttribute("aaa"); // 沒(méi)有規(guī)定的也可以獲取
    
    
  • 移除標(biāo)簽屬性

    <div id="box"></div>
    var box = document.getElementById("box");
    box.removeAttribute("id"); // 有規(guī)定的可以刪除
    box.removeAttribute("aaa"); // 沒(méi)有規(guī)定的也可以刪除
    
    

元素對(duì)象&&標(biāo)簽

  • 給元素對(duì)象設(shè)置自定義屬性,無(wú)法映射到對(duì)應(yīng)的標(biāo)簽上
  • 給標(biāo)簽設(shè)置自定義屬性
    • 有規(guī)定的可以映射到元素對(duì)象上
    • 沒(méi)有規(guī)定的無(wú)法映射到元素對(duì)象上
    • ie6/7/8都可以從元素對(duì)象上獲取(特殊)
  • 標(biāo)簽和對(duì)象的自定義屬性 不會(huì)相互影響(IE678除外)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,791評(píng)論 1 92
  • 個(gè)人博客 上篇介紹了HTML DOM、節(jié)點(diǎn)樹、文檔中所有類型節(jié)點(diǎn)的基類型Node類型及Node節(jié)點(diǎn)操作、本篇介紹D...
    驚鴻三世閱讀 438評(píng)論 0 3
  • 在JavaScript中是通過(guò)Document類型表示文檔。瀏覽器中,document對(duì)象是HTMLDocumen...
    FeRookie閱讀 281評(píng)論 0 2
  • 之前學(xué)習(xí)了什么是DOM, 知道了DOM就是節(jié)點(diǎn),那么面臨的第二個(gè)問(wèn)題就是,我們應(yīng)該怎樣去使用這些節(jié)點(diǎn)呢。 想要使用...
    西瓜w閱讀 288評(píng)論 0 0
  • 國(guó)慶長(zhǎng)期去哪兒——自駕湖南鄉(xiāng)村旅游 鄉(xiāng)村旅游找哪個(gè)——鄉(xiāng)村民宿共享平臺(tái)農(nóng)城微旅 湖南不止有張家界、玻璃橋、鳳凰古城...
    農(nóng)城微旅閱讀 482評(píng)論 0 0