前端小测DOM基础测试34(节点遍历)

DOM 基础

所有小题共用一个上下文:

1. 获取页面上所有的<a>元素

2. 获取页面上面所有的链接元素

3. 遍历上面所有的链接元素,如果:

   • 当链接元素中 href 属性值以’javascrpt:’开头的元素,则设置 role 属性为’button’
   • 当前链接元素 herf 属性值对应的 url 地址和当前网页地址栏中的 host 地址不一样,设置当前链接元素的 target 属性值为’_blank’,同事设置 rel 属性值包含’external’,’nofollow’,’noopener’
   • 当前链接元素 href 属性以’#’开头,则设置该元素 rel 属性值为’internal’

大佬解答

zzx 主要知识要点:

1.获取所有 a 元素,两种方法:

document.getElementsByTagName("a"); //所有浏览器都支持
document.querySeletorAll("a"); //IE 8+

2.获取页面所有链接元素:

document.links或者document.querySelectorAll(':link')都是可以的。

链接元素和元素的区别：首先没有 href 属性的元素不是链接元素，其次链接元素还包括元素（带 href）。document.querySelectorAll('[href]')的问题在于，普通元素设置 href 属性也能获取。

3.NodeList 直接 forEach IE 浏览器不支持，Chrome、Firefox 也是最近几年才支持。需要转换成数组，使用[].slice.call(links)，IE9+支持的。如有要兼容 IE8，那就是 for 循环。

4.startsWith 可以关注下，字符串前匹配。

5.链接地址和当前地址栏地址 host 匹配，eleLink.host == location.host。链接元素天然自带：host（包括端口）, hostname, hash 等属性，和 location 对象一样。不要使用 hostname 有 bug，端口不一也会匹配，例如：<a href="//www.xxxx.com:80"> 和 URL //www.xxxx.com:90 会认为是一个域下，实际上不是的。

6.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 属性。

7.link.href.indexOf('#') > -1有 bug，例如 href="//otherdomain.com#xxxx"，还有一种/^#/.test(link.href)也是有 bug 的，因为 href 属性通过 DOM 对象直接获取是带有域名的，需要匹配 getAttribute 获取的 href 属性值，也就是这里可以/^#/.test(link.getAttribute('href'))