得分
我得了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;
}
为什么?