css面试题----DOM基础测试34

这个其实是上上个星期张鑫旭直播的内容，我吧我不会的内容总结一下，从而来分享给大家

题目

第一问

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'))