这个其实是上上个星期张鑫旭直播的内容,我吧我不会的内容总结一下,从而来分享给大家
题目
第一问
document.querySelectorAll('a');
第二问
// 1.有bug当有这个href属性但没属性值
document.querySelectorAll('[href]')
// 2.接口的links只读属性Document返回文档中所有<area>元素和<a>元素的集合,其中包含href属性的值
nodeList = document.links
第三问
这里需要注意nodeList并不是真正的数组,NodeList直接forEach IE浏览器不支持,Chrome、Firefox也是最近几年才支持。需要转换成数组,要使用[].slice.call(links)支持IE9或ES6 [...links],Arrar.from((links)转数组(其实没必要,因为支持ES6也就支持NodeList直接forEach)。如有要兼容IE8,那就是for循环
links = [].slice.call(nodeList)
links.forEach(item => {
// zxx: 正则写错了吧(之前我是写错了现在改过来了)
checkThevalue = /\^javascript:/
urlVal = item.getAttribute('href')
if (checkThevalue.test(urlVal)) {
item.setAttribute('role', 'button')
}
});
第四问
- 链接地址和当前地址栏地址host匹配,eleLink.host == location.host。
- 链接元素天然自带:host(包括端口), hostname, hash等属性,和location对象一样。
-
不要使用hostname有bug,端口不一也会匹配,例如:<a href="//www.xxxx.com:80">和URL //www.xxxx.com:90 会认为是一个域下,实际上不是的
第五问
拓展
- rel='stylesheet' 那么href就算指向样式表资源
- rel='external' 当链接指向外部资源或外部链接的时候,可以告诉搜索引擎,这是一个外部链接,常常和nofollow一起使用
- rel='nofollow' 让网站站长告诉搜索引擎“不要跟踪此网页上的链接”或“不要跟踪此特定链接”
- rel='noopener'
- 这是一个很重要的且常用的rel属性值,与安全相关。
- 如果我们的链接元素没有设置noopener,则在新窗口打开这个链接的时候,则这个新窗口页面可以通过window.opener获取来源页面的窗体对象,于是可以改变原页面URL地址之类的事情
这里其实就算考察的rel的赋值了,这里必要要用add方法
- rel属性值包含。
- 就是不覆盖原来设置的rel属性值。需要用到relList,需要注意的是多个rel属性值赋值需要使用relList的add方法,而不是直接等于。
- 直接等于不是赋值多个,而是一个,例如:element.relList = ['external', 'nofollow', 'noopener'],最后结果是<a href rel="external,nofollow,noopener">是不合法的,应该空格分隔。
- 正确用法(出题本意):link.relList.add('external', 'nofollow', 'noopener')。relList和classList API细节都是一样的,只不过一个针对class属性,一个是rel属性
第六问
- link.href.indexOf('#') > -1有bug,例如 href="//otherdomain.com#xxxx",
- 还有一种/^#/.test(link.href)也是有bug的,因为href属性通过DOM对象直接获取是带有域名的,
- (正确)需要匹配getAttribute获取的href属性值,也就是这里可以/^#/.test(link.getAttribute('href'))