前端小测----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