前端小測----DOM測試38

得分 

我得了2分，難受，明明感覺是3分的 哈哈

分析

其實這個題目就是對僞類進行了一定考察，我太菜了，嗚嗚嗚

第一問：獲取所有匹配required必選的單選框元素

我的答案

var requiredInputAll = document.querySelectorAll("input[type='radio'][required]")

正解

let disabledArr = document.querySelectorAll('[type="radio"]:required');

爲什麼？

• 首先input確實是不用加的因爲type='radio'屬性就已經可以了
• :required僞類選擇器，IE10+支持。和[required]屬性選擇器的區別,暫時還沒找到，找到補充

第二問：獲取所有匹配display禁用態的單選框元素

我的答案：其實我當時寫的時候是不找到還可以有僞類這個東西的

    var disabledInputAll = []
    var disabledInputPart_1 = document.querySelectorAll("input[disabled]")
    var disabledInputAll = [...disabledInputPart_1]
    var disabledFieldsetInput = document.querySelectorAll("fieldset[disabled]")
    // console.log([].slice.call(disabledFieldsetInput)[0])
    Array.from(disabledFieldsetInput).forEach(item => {
      Array.from(item.querySelectorAll("input[type='radio']")).forEach(item => {
        if (!disabledInputAll.includes(item)) {
          disabledInputAll.push(item)
        }
      })
    })

正解：簡單粗暴明瞭

let disabledArr = document.querySelectorAll('[type="radio"]:disabled');

爲什麼？

因爲fieldset標籤類的表達元素會繼承fieldset的屬性，所以當<fieldset>設置了disabled的時候他的子元素都會被設置

總結：:disabled僞類，IE9+支持。和[disabled]屬性選擇器的區別，有些表單元素本身沒有[disabled]屬性，但是，自身是處於應用態的。這就是:disabled僞類設計的原因之一

第三問：獲取所有checked選中態的單選框元素

我的答案

var checkedInputAll = document.querySelectorAll('input[checked]')

正確答案

var checkedInputAll1 = document.querySelectorAll('input:checked')

爲什麼？

:checked僞類，IE9+支持。和[checked]屬性選擇器的區別，有些單複選框雖然有[checked]屬性，但是本身並不是選中態。這就是:checked僞類設計的原因之一

HTML：單選框name相同只可以選擇一個，但是當我們寫了2個後

<input type="radio" value="ba1" name="bookAuthor" checked>宅豬
<input type="radio" value="ba2" name="bookAuthor">西紅柿
<input type="radio" value="ba3" name="bookAuthor" checked>莫默

JS

    var checkedInputAll = document.querySelectorAll('input[checked]')
    var checkedInputAll1 = document.querySelectorAll('input:checked')
    console.log(checkedInputAll.length, 'checkedInputAll--------------------') // 2
    console.log(checkedInputAll1.length, 'checkedInputAll--------------------') // 1

看輸出結果是不一樣的，所以我的分啊

第四問：獲取ID爲removeDisabled的按鈕元素, 點擊改按鈕移除所有單選框元素的disabled禁用效果

我的答案：這個題目我應該是對了，但是就是謝的好像有點撈

    var removeDisabled = document.getElementById('removeDisabled')
    disabledInputPart_1.forEach(item => {
      item.removeAttribute('disabled')
    })
    disabledFieldsetInput.forEach(item => {
      item.removeAttribute('disabled')
    })

大佬的寫法：我真的太菜了，其實意思是一樣的

// 這個是第二問的答案
const radiolist2 = document.querySelectorAll('[type=radio]:disabled');
// 第四問
const btn = document.querySelector('#removeDisabled');
btn.addEventListener('click',()=>{
    [...radiolist2].forEach(el=>{
      const fieldset = el.closest('fieldset:disabled');
      if (fieldset) {
        fieldset.disabled = false;
      }
      if (el.disabled) {
        el.disabled = false;
      }
    });
})

爲什麼？

Element.closest() 方法用來獲取：匹配特定選擇器且離當前元素最近的祖先元素（也可以是當前元素本身）。如果匹配不到，則返回 null

第五問

答案

    [type=radio]:invalid {
      outline: 3px dashed red;
    }

最優正解

    [type=radio]:invalid {
      outline: dashed red;
    }

爲什麼？

• :invalid CSS 僞類 表示任意內容未通過驗證的 <input> 或其他 <form> 元素
• outline：的默認大小爲3px