DOM基础测试34

[zhangxinxu]

本期题目如下：

大家提交回答的时候，注意缩进距离，起始位置从左边缘开始；另外，github自带代码高亮，所以请使用下面示意的格式。

```js
// 你的JS代码写在这里
 ```

**非开放性问题，闭卷，勿查资料，大家诚实作答**

其他 本期小测答疑直播为7月13日上午10:00，预计半小时左右。直播地址：https://live.bilibili.com/21193211

每位答题者会有至少2积分参与分，本次小测满分10积分。

首位答题者会100%被翻牌。

[smiledpeace]

    1.
    document.getElementsByTagName('a')
    2. document.links
    3.
    for (let i = 0, len = document.links.length; i < len; i++) {
        let link = document.links[i];
        switch (true) {
            case link.href.indexOf('javascript') > -1:
                link.setAttribute('role', 'button');
                break
            case link.href.indexOf(location.href) === -1:    // zxx:  非题意
                link.setAttribute('target', '_blank');
                link.setAttribute('rel', 'external nofollow noopener');
                break;
            case link.href.indexOf('#') > -1:    //zxx: 有bug
                link.setAttribute('rel', 'internal')
        }
    }

[wingmeng]

第 1 题：

let a_labels = document.querySelectorAll('a');

第 2 题：

let links = document.querySelectorAll(':link');

第 3 题：

使用 querySelectorAll 获取的元素可直接用 forEach 遍历，或者转换为 Array 类型再遍历

// 3.1
[].slice.call(links).filter(link => {
  if (/^javascript:/i.test(link.href)) {
    link.setAttribute('role', 'button');
    return false;
  }

  return true;
})

// 3.2
.filter(link => {
  // 锚点链接
  if (/^#/.test(link.href)) {   // zxx: 有bug
    return true;
  }

  // 站外链接
  if (!(new RegExp(`^${location.host}`, 'i')).test(link.host)) {
    link.setAttribute('target', '_blank');
    link.setAttribute('rel', 'external nofollow noopener');
    return false;
  }

})

// 3.3
.forEach(link => {
  // 此处接收到的数组只包含以 # 开头的锚点元素（3.2 中已过滤）
  link.setAttribute('rel', 'internal');
});

[NeilChen4698]

1. document.querySelectorAll('a')

2. document.querySelectorAll('[href]')   // zxx: 有bug，例如<div href></div>

   3.1

   //  zxx: 直接forEach IE不支持，Chrome也是最近几年才支持
   document.querySelectorAll('[href]').forEach(function(v) {   
   if (!!v.href && v.href.indexOf('javascript: ') === 0) {
       v.setAttribute('role','button');
   }
   });

   3.2

   // zxx: 实现啰嗦了
   function getHost(url) {
   var arr = /^http(?:s)?:\/\/([^\/]+)\/.*$/.exec(url);
   return !arr ? '' : arr[1];
   }
   document.querySelectorAll('a[href]').forEach(function(v) {
   if (!!v.href && getHost(v.href) !== getHost(document.URL)) {
       v.setAttribute('target','_blank');
       v.setAttribute('rel','external,nofollow,noopener');
   }
   });

   3.3

   //zxx: 有bug
   document.querySelectorAll('[href]').forEach(function(v) {
   if (!!v.href && v.href.indexOf('#') === 0) {
       v.setAttribute('rel','internal');
   }
   });

[9lk]

1. var links = querySelectorAll("a")

2. var alinks= links.filter(item => item.getAttribute("href").find('#'))

3.1) elms.forEach( el => el.getAttribute("href").startWith("javascript") && el.setAttribute("role", "button") })

3.2) elms.forEach( el => { var eqUrl = el.getAttribute("href") === window.href if (!eqUrl) { el.setAttribute("target", "_blank") el.setAttribute("rel", "external nofollow noopener") }

[fzpijl]

1.  var aList = document.getElementsByTagName('a')

2. var linkList = document.links

3. for(var i = 0; i < linkList.length; i++){
       var item = linkList[i]
       //3.1
       if(item.href.startsWith('javascript:')){
          item.setAttribute('role', 'button'
       }

       //3.2
      // hostname有bug，端口不一也会匹配
       if(item.hostname !== window.location.hostname){
           item.target = '_blank'
          // zxx: rel设置丢了
       }

       //3.3
       if(item.href.startsWith('#'){
          item.rel = 'internal'
       }
   }

[guqianfeng]

        let aA = document.querySelectorAll("a"); //第一题 获取所有a元素
        let aLink = document.links; //第二题 获取所有link元素
        // 第三题
        [...aLink].forEach(item => {
            let href = item.getAttribute("href");
            if(href.startsWith("javascript:")){
                item.setAttribute("role", "button")
            }else if(href !== window.location.href){
                // zxx: 是rel属性
                item.setAttribute("role", "external nofollow noopener")
            }else if(href.startsWith("#")){
               // zxx: 是rel属性
                item.setAttribute("role", "internal")
            }else{
                //扩展以后的规则
            }
        })

[wang-baojin]

1. let NodeList_A=  document.querySelectorAll("a")

2. // zxx: <div href></div>也会被选中
   let NodeList_Href= document.querySelectorAll("[href]")

   3.1

   NodeList_Hrdef.forEach((item)=>{
   let temp=item.href;
   let reg=/^javascript/
   if(reg.test(temp)){
       item.setAttribute("role", "button")
   }
   })

   3.2

   let host=window.location.host;
   NodeList_Hrdef.forEach((item)=>{
   if(item.host!=host && item.tagName=="A"){
       item.setAttribute("target", "_blank");
       item.setAttribute("rel", "external nofollow noopener");
   }
   })

   3.3

   // zxx: 有问题
   NodeList_Hrdef.forEach((item)=>{
   let temp=item.href;
   let reg=/^#/
   if(reg.test(temp)){
       item.setAttribute("rel", "internal")
   }
   })

[jiyihui]

1. var aList = document.querySelectorAll('a')

2. var links = document.links

   3. 
      
      var linkArray  = Array.from(document.links);  
      linkArray.forEach(item => {
      
         if (item.href && item.href.indexOf('javascript:') === 0) {
             item.setAttribute('role', 'button')
          }
          // zxx: 如果地址有端口，这里就有bug     
          if (location.host !== item.hostname && item.tagName === 'A') {
                item.setAttribute('target', '_blank')
                item.setAttribute('rel', 'external nofollow noopener')
          }
      
           if (item.href && item.href.indexOf('#') === 0) {
               item.setAttribute('rel', 'internal')
           }
      
          })

[ZhangXDong]

        <div>test1</div>
    <a href="javascript:;">1</a>
    <a href="#">2</a>
    <div>test2</div>

        // 1.获取页面中所有 a 元素
    var aElem = document.getElementsByTagName('a')

    // 2. 不知道哎

    for (var i = 0; i < aElem.length; i++) {
        var curHref = aElem[i].getAttribute('href')

        // 3.href 属性为 javascript：开头的元素，设置 role 属性值为 'button'
        if (new RegExp('^javascript:').test(curHref)) {
            aElem[i].setAttribute('role', 'button')
            console.log(aElem[i]);
        }

        // 4.href 属性对应 url地址与当前host地址不一致，则设置<a>元素 target 属性值为 '_blank'
        //   同时设置 rel 属性值包含 'external', 'nofollow', 'noopener'
        if (curHref != location.host) {
            aElem[i].setAttribute('target', '_blank')
            aElem[i].setAttribute('rel', 'external nofollow noopener')
            console.log(aElem[i]);
        }

        // 5.href 属性以 # 开头，则设置 rel 属性值为 'internal'
        if (new RegExp('^#').test(curHref)) {
            aElem[i].setAttribute('rel', 'internal')
            console.log(aElem[i]);
        }
    }

[xuejianrong]

// 1.
var links = document.querySelectorAll('a')

// 2.
// zxx: 链接元素有别于<a>元素
links = document.querySelectorAll('a')

// 3.1
links.forEach(link => {
    if (/^javascript:/.test(link.href)) {
        link.setAttribute('role', 'button')
    }
})
// 3.2
links.forEach(link => {
    var href = link.href
    var hrefHost = /\/\/(.*)\//.exec(href)[0].replace(/^(\/\/)|(\/.*)/g, '')
    var host = location.host
    if (hrefHost === host) {
        link.setAttribute('target', '_blank')
        link.setAttribute('rel', 'external nofollow noopener')
    }
})
// 3.3
links.forEach(link => {
    if (/^#/.test(link.href)) {
        link.setAttribute('rel', 'internal')
    }
})

[livetune]

// 1.
const aList = document.querySelectorAll('a')
console.log(aList)
// 2. 不知道 link 在不在链接元素里
const linkList = document.links
console.log(linkList);
// 3.
[].slice.call(linkList).forEach(function (elm) {
    let {
        href
    } = elm
    if (elm.href.startsWith('javascript:')) {
        elm.setAttribute('role', 'button')
    }
    if (elm.host !== location.host&&elm.host) {
        elm.setAttribute('target', '_blank')
        elm.rel = 'external nofollow noopener'
    }
    if (elm.getAttribute('href')[0] === '#') {
        elm.rel = 'internal'
    }
})

[brenner8023]

// 1.
var aList = document.getElementsByTagName('a');
// 2.
var linkList = document.querySelectorAll(':link');
// 3.
for(var elem in linkList) {
    if(elem.href.startsWith('javascript:')) elem.setAttribute('role', 'button');
    if(elem.href !== location.host) {
        elem.setAttribute('target', '_blank');
        elem.setAttribute('rel', 'external nofollow noopener');
    }
    if(elem.href[0] === '#') elem.setAttribute('rel', 'internal');
}

[XboxYan]

const a = document.querySelectorAll('a');

const links = document.querySelectorAll('a[href],area[href]');

links.forEach(item=>{
    const href = item.getAttribute('href');
    if(href.startsWith('javascript:')){
        item.setAttribute('role','button');
    }else if(href.startsWith('#')||href.startsWith('/')){  //zxx: 题目没有要求根地址吧
        item.setAttribute('rel', 'internal');
    }else if(item.tagName=='A'&&item.host!==location.host){
        item.setAttribute('target', '_blank');
        item.setAttribute('rel', 'external nofollow noopener');
    }else{
        //不处理
    }
})

[Despair-lj]

// 1
var allA = document.querySelectorAll('a');
// 2
var links = document.links;
// 3.1
for (var link of links) {
  /^javascript:/.test(link.href) && link.setAttribute('role', 'button');
}
// 3.2
var host = document.location.host;
for (var link of links) {
  if (link.host !== host) {
    link.setAttribute('target', '_blank');
    link.setAttribute('rel', 'external nofollow noopener');
  }
}
// 3.3
for (var link of links) {
  /^#/.test(link.href) && link.setAttribute('role', 'internal');
}

[kuikuiGe]

//1
var aDomArr = [].slice.call(document.querySelectorAll("a"));

//2
var linkDomArr = aDomArr.filter(function(item){
    var currHref = item.getAttribute("href");
    return currHref != null;
});

//3
var windowHost = window.location.host;
linkDomArr.forEach(function(item){
    var currHref = item.getAttribute("href");
    // (1)
    var searchStr = "javascript:";
    if(currHref.substr(0,searchStr.length) == searchStr){
        item.setAttribute("role","button");
    }

    // (2)
    if(item.host&&item.host != windowHost){
        item.setAttribute("target","_blank");
        item.setAttribute("rel","external nofollow noopener");
    }

    // (3)
    var searchStr = "#";
    if(currHref.substr(0,searchStr.length) == searchStr){
        item.setAttribute("rel","internal");
    }
});

[Seasonley]

//1
document.querySelectorAll('a')
//2
var links=document.querySelectorAll('a[href]')
//3
links.forEach(item=>{
  if(/^javascript:/.test(item.href)){
    item.role='button'
  }
  else if (!(new RegExp('^'+location.origin)).test(item.href)){
    item.target= '_blank'
    item.setAttribute('rel',Array.from(new Set((item.getAttribute('rel')||'').split(/\s+/).concat(['external', 'nofollow','noopener']))).join(' '));
  }
  else if(new RegExp('^'+location.href+'#')).test(item.href)){
    item.setAttribute('rel','internal')
  }
})

[ghost]

// 1
const anchors = document.querySelectorAll('a')
// 2
const links = document.querySelectorAll('link')
const all = [...anchors, ...links]
// 3
//zxx: relList IE不支持，然后多个rel属性值需要使用relList的add方法
// relList额外加1积分
const processLink = (element) => {
    let h = element.getAttribute('href')
    if (h.startsWith('javascript: ')) {
        element.role = 'button'
    } else if (h.startsWith('http') && h !== window.location.href) {
        element.target = '_blank'
        element.relList = ['external', 'nofollow', 'noopener']
    } else if (h.startsWith('#')) {
        element.relList = ['internal']
    }
}

for (let i = 0; i < all.length; i++) {
    let e = all[i]
    processLink(e)
}

[smileyby]

const host = window.location.host;
let arr = document.getElementsByTagName('a');
arr = Array.prototype.slice.call(arr);
arr.forEach(item => {
    let href = item.href;
    if (/^javascript:/.test(href)) {
        item.setAttribute('role', 'button');
    };
    if (href !== host) {
        let rel = item.getAttribute('rel') || '';
        rel += ' external nofollow noopener';
        rel = rel.trim();
        item.setAttribute('rel', rel);
        item.setAttribute('target', '_blank');
    }
    if (/^#/.test(href)) {
        item.setAttribute('rel', 'internal');
    }
})

[WWR1234567]

1. document.getElementsByTagName('a')
   document.querySelectorAll('a')

2. var ellinks = document.getElementsByTagName('link');
   var elas = document.getElementsByTagName('a')

3. [...Array.from(ellinks), ...Array.from(elas)].map(el => {
    let hrefS = el.getAttribute('href') 
    if(
        hrefS && 
        hrefS.startsWith('javascript:')
    ) {
        el.setAttribute('role', 'button');
    }
    var relS = el.getAttribute('rel') || '';
    if(
        hrefS
        && !(hrefS.split('#')[0]
        .includes(window.location.host))
    ) {
        el.setAttribute('target', '_blank');
        relS += ' external nofollow noopener';
        el.setAttribute('rel', relS);
    }

    if(hrefS.startsWith('#')) {
        el.setAttribute('rel', 'internal');
    }
})

[bugaosunihhh]

第一题

let a1 = document.querySelectorAll("a");
let a2 = document.getElementsByTagName("a");

第二题

let links = document.links // links 属性返回一个文档中所有具有 href 属性值的 <area> 元素与 <a> 元素的集合。

第三题

let links = document.links // links 属性返回一个文档中所有具有 href 属性值的 <area> 元素与 <a> 元素的集合。
Array.prototype.slice.call(links).forEach(item =>
    {
        // 3-1
        if(/^javascript:/.test(item.href)){
            item.setAttribute('role','button');
        }

        // 3-2
        if(item.host !== location.host){
            item.setAttribute('target','_blank');
            item.setAttribute('rel','external nofollow noopener');
        }

        // 3-3
        if(/^#/.test(item.href)){
            item.setAttribute('rel','internal');
        }
    }
)

[lifelikejuly]

• 1

  document.querySelectorAll("a");

• 2

  document.querySelectorAll(':link');

• 3

  const hrefs = document.querySelectorAll(':link');   
  hrefs.forEach(item => {
  const href = item.getAttribute('href');
  if(href.startsWith('javascript:')){
      item.setAttribute('role','button');
  }else if(item.host != window.host){
      item.setAttribute('target','_blank');
      item.setAttribute('rel','external nofollow noopener');
  }else if(href.startsWith('#')){
      item.setAttribute('rel','internal');
  }
  })

[les-lee]

// 1.
document.querySelectorAll('a')
// 2. 
document.links
// 3.
for (let i = 0, len = document.links.length; i < len; i++) {
  let link = document.links[i];
  let matchhost = link.href.match(/:\/\/[^/]+/)
  let host = null

  // zxx: 这样获取有bug，例如自定义协议地址，custom://www.url这样的
  if (matchhost) {
    host = matchhost[0].substring(3)
  }
  if (link.href.startsWith('javascript:')) {
    link.setAttribute('role', 'button');
  } else if (host != document.location.host) {
    link.setAttribute('target', '_blank');
    link.setAttribute('rel', 'external nofollow noopener');
  } else if (link.href.startsWith('#')) {
    link.setAttribute('rel', 'internal')
  }
}

[flyinglove]

1.

document.querySelectorAll('a')

2. 
   document.links

document.querySelector(':link")

3. 
```javascript
res.forEach((item) => {
    const attr = item.getAttribute('href')
    if (attr === 'javascript:;') {
        item.setAttribute('role', 'button')
    } else if (item.host !== location.host) {
        item.setAttribute('target', '_blank')
        item.relList.add('external', 'nofollow', 'noopener')
    } else if(attr[0] === '#') {
        item.setAttribute('rel', 'internal')
    }
})

[liuyueji]

1、var allA = document.querySelectorAll('a')
2、var links = document.querySelectorAll("*[href]")    //zxx: 显然不对的啦，如<i href>
3、var links = [].slice.call(links);

links.forEach(link => {
    var href = link.href;
    console.log(href)
    if(href && href.startsWith('javascript:')) {
        link.setAttribute('role','button')
    }
       if(href && href.indexOf(location.host)===-1){
           link.setAttribute('target', '_blank')
            link.setAttribute('rel', 'external nofollow  noopener')
        }
        if(href && href.startsWith('#')){
           link.setAttribute('rel', 'interal')
        }
})

[leisure-wang]

1，var a = document.getElementsByTagName("a") 2，var Alink = document.links 3， for(var i=0;i<a.length;i++){ if(a[i].href.slice(0,10) === 'javascript'){ a[i].setAttribute('role','button') } if(a[i].href.slice(7,21) === window.location.host){ a[i].setAttribute('target','_blank') a[i].setAttribute('rel','external nofollow noopener') } if(a[i].getAttribute("href") === '#'){ a[i].setAttribute('rel','internal') } }

[frankyeyq]

1.
 document.querySelectorAll('a')
2. 
document.links
3.1 
document.links.forEach(item => {
    if(item.href.indexOf('javascript:') === 0) item.setAttribute('role', 'button');
});
3.2 
document.links.forEach(item => {
    let host = window.location.host
    if(item.href.indexOf(host) < 0) {    // zxx: 有bug，如xxx.com?url=abc.com
        item.setAttribute('target', '_blank');
        item.setAttribute('rel', 'external nofollow nooperner');
    }
});
3.3
document.links.forEach(item => {
    if(item.href.indexOf('#') === 0) item.setAttribute('rel', 'internal');
})

[ylqlalala]

1.

let aNodeList = document.getElementsByTagName("a");

2.

let linkNodeList = [];
for(let i = 0; i < aNodeList.length; i++) {
    if(aNodeList[i].href) {
        linkNodeList.push(aNodeList[i])
    }
}

3.

linkNodeList.map(item => {
   let href = item.href;
   if(href.indexOf("javascript:") > -1) {
      item.setAttribute('role','button')
   } 
   if(href !== window.location.host) {
      item.setAttribute('target','_blank');
      item.setAttribute('rel','external nofollow noopener');
   }
   if(href[0] === "#") {
      item.setAttribute('rel','internal')
   }
})

[liyongleihf2006]

jsbin

<a>nohref</a>
<a href>href</a>
<a href="">href=""</a>
<a href="javascript:"></a>
<a href="test1.html"></a>
<a href="https://www.baidu.com"></a>
<a href="#aaa" rel="hehe"></a>
<a href="https://www.baidu.com#bbb"></a>
<map name="map">
    <area shape="circle" coords="100,100,100" href="https://www.baidu.com/" />
</map>
<img usemap="#map" src="data:image/svg+xml,%3Csvg  version='1.1' xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='100' fill='lightblue'/%3E%3C/svg%3E" />

a::after {
    content: attr(href)
}

//所有的a标签
const anchors = document.querySelectorAll('a');
console.log(anchors);
//所有的链接元素
const links = document.links;
console.log(document.links);
//3
Array.from(links).forEach(link => {
    if (/^javascript:/.test(link.href)) {
        link.setAttribute('role', 'button');
    } else if (link.host !== location.host) {
        link.target = "_blank";
        //题目中说的是包含,所以原有的不能覆盖掉,只能是添加
        link.relList.add('external', 'nofollow', 'noopener');
        //题目中说的是href以#开头的,所以 当前host# 这种格式的也不符合要求
    } else if (/^#/.test(link.getAttribute('href'))) {
        //题目中说的是设置为,所以直接覆盖原有的值
        link.rel = 'internal';
    }
});

[JaimeCheng]

// 1
var as = document.getElementsByTagName('a')
// 2
var links = document.querySelectorAll('[href]');
// 3
links.forEach(el => {
   const val = el.getAttribute('href');
   if (val.indexOf('javascript:') === 0) {
      el.setAttribute('role', 'button')
   }
   if (val.indexOf('#') === 0) {
      el.setAttribute('rel', 'internal');
   }
   if (el.host !== location.host) {
      el.setAttribute('target', '_blank');
      el.setAttribute('rel', 'external nofollow noopener');
   }
})

[asyncguo]

// 1 
document.querySelectorAll('a')
// 2
 document.querySelectorAll('*[href]')
// 3 
let links = [...document.querySelectorAll('*[href]')]
// 1)
links.forEach((item, index) => {
  if (item.href.startsWith('javascript:')) {
    item.setAttribute('role', 'button')
  }
})
// 2)
links.forEach((item, index) => {
  if (item.href.host !== location.host && item.nodeName === 'A') {
    item.setAttribute('target', '_blank')
    item.setAttribute('rel', 'external nofollow noopener')
  }
})
// 3)
links.forEach((item, index) => {
  if (item.href.startsWith('#')) {
    item.setAttribute('rel', 'internal')
  }
})

[ziven27]

(function(){
    // 第一题
    var allAnchors=document.getElementsByTagName('a');

    // 第二题
    var allLinks=document.querySelectorAll('a[href]');

    // 第三题
    var pageHost=window.location.host;
    allLinks.forEach(function(item){
        if(item.href.indexOf('javascript:')===0){
            item.setAttribute('role','button');
        }else if(pageHost!==item.host){
            item.target='_blank';
            item.rel='external nofollow noopener';
        }else if(item.hash){   // zxx: 这个//samedomain.com/otherpage#xxxxx也会匹配，并非当前页面
            item.rel='internal';
        }
    });
})();

[GitHdu]

1. 

document.querySelectorAll("a")

2. 

const links = document.querySelectorAll("a[href]")

3. 

links.forEach(link => {
  if (link.href.startsWith("javascript")) {
    link.setAttribute("role", "button");
  }
  if (link.href !== location.host) {
    link.setAttribute("target", "_blank");
    const originAttr = link.getAttribute("rel");
    link.setAttribute("rel", `${originAttr || ""} external nofollow noopener`);
  }
  if (link.href.startsWith("#")) {
    link.setAttribute("rel", "internal");
  }
});

[zy017]

// 1.获取页面上所有a元素
var a = document.querySelectorAll('a')

// 2.获取页面上所有链接元素
var linkList = document.querySelectorAll("[href]")

// 3
linkList.forEach(el => {
    var href = el.getAttribute('href')
    if (href.startsWith("javascript:")) {
        el.setAttribute('role','button')
    }
    // 使用 el.href 可以获取带域名的绝对路径，可以直接切出host
   // zxx: 有bug哟，例如javascript:/xxxx.com/samedomain.com/
    if (el.href.split('/')[2] !== location.host) {
        el.setAttribute('target','_blank')
        el.setAttribute('rel','external nofollow noopener')
    }
    if (href.startsWith("#")) {
        el.setAttribute('target','_blank')
        el.setAttribute('rel','interna')   //zxx: 少了个字母l
    }
})

[zengqingxiao]

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

    let allA = document.querySelectorAll('a');

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

    //方法一：通过links API
    let links = [].slice.call(document.links);
    //方法二：通过遍历页面上的所有元素中是否含有hrdf属性
    //let domAllTagArr = document.getElementsByTagName('*');
    let domAllTagArr = [].slice.call(document.getElementsByTagName('*'));
    let arrLink = domAllTagArr.filter(item => {
      return item.getAttribute('href');
    })

    //3.遍历页面上所有的链接元素
    links.forEach(item => {
     // zxx: 正则写错了吧
      checkThevalue = /\bjavascript:/
      checkThevalue_1 = /\b#/
      urlVal = item.getAttribute('href')
      if (checkThevalue.test(urlVal)) {
        item.setAttribute('role', 'button')
      }
      if (urlVal !== window.location.href) {
        if (item.localName === 'a') {
          item.setAttribute('target', '_blank');
          item.setAttribute('rel', 'external nofollow noopener')
        }
      }
      if (checkThevalue_1.test(urlVal)) {
        item.setAttribute('rel', 'internal')
      }
    });

[CandyQiu]

codepen demo 链接点击

// 1
document.querySelectorAll("a");

// 2 - 不确定链接元素是什么

// A: href一般是链接元素
let hrefElement = document.querySelectorAll("[href]")
// B: header 中的script 
// let script = document.querySelectorAll("script[src]")
// let linkElement = document.querySelectorAll("[href],script[src]")

// 3
function getHost(url) {
  let domain = url.split('/'); //以“/”进行分割   //zxx: 此方法有bug，参见zy017那里的说明
  if( domain[2] ) {
   return domain = domain[2];
  }
}

hrefElement.forEach(function(item,index,array) {
  // 3.1
  let patt = /^javascript:/;
  if(patt.test(item.href)){
    item.role = "button";
  }

  // 3.2
  let itemHost= getHost(item.href);
  let windowHost= window.location.host;
  if(itemHost!==windowHost){    
   item.target = "_blank";
   item.rel = item.rel +" external nofollow noopener"
  }

 // 3.3
  let patt2 = /^#/;
  if(patt2.test(item.href)){
    item.rel = "internal";
  }

})

[whrice]

//1.获取页面上的所有a元素
document.querySelectorAll('a');
//2.获取页面上的所有链接元素
document.links
//3.1 href以'javascript:'开头，设置属性role为button
var arr=Object.keys(document.links).map(function(item){
        return document.links[item];
    })
arr.filter(function(element){
         return element.getAttribute('href').startsWith('javascript:');
    }).map(function(ele){
          ele.setAttribute('role','button');
      });
//3.2 href属性值对应的url地址和当前网页地址栏的host地址不一样
var host=window.location.host;
arr.forEach(function(ele){
   if(ele.host!=host){
          ele.setAttribute('target','_blank');
          ele.setAttribute('rel','extermal nofollow npppener');
      }
//3.3  当前链接元素href属性值以'#'开头
   if(ele.getAttribute('href').startsWith('#')){
        ele.setAttribute('rel','internal')
      }
    })

[WGHwebitem]

console.log(document.getElementsByTagName('a'));//第一题
console.log(document.querySelectorAll(':link'));//第二题

//zxx: DOM小测都是使用原生JavaScript API哟~
       //第三题
       $('a').each(function(index,ele){
          console.log(ele);
          var val=$(ele).attr('href');
          if(val.substring(0,11)=='javascript:'){//3-1
            $(ele).attr('role','button');
          }else if(ele.host!=window.location.host){//3-2
            $(ele).attr({'target':'_blank','rel':'external nofollow noopener'});
          }else if(val.substring(0,1)=="#"){//3-3
            $(ele).attr('rel','internal');
          }         
       })

[347235420]

1. let hrefA = document.getElementsByTagName("a")；

2. let href=document.querySelectorAll("[href]")；

3. 3.1 let host=window.location.host; href.forEach((item) =>{ if(item.getAttribute('href').indexOf('javascript:') !== -1){ item.setAttribute('role', 'button') } }) 3.2 href.forEach((item,index) =>{ if(item.host === host){ item.setAttribute('target', '_blank') item.setAttribute('rel','extermal nofollow npppener'); } }) 3.3 href.forEach((item,index) =>{ if(item.getAttribute('href').indexOf('#') == 0){ item.setAttribute('rel', 'internal') } })

[uaison]

(function(){
  // 第一题
  let aNodes = document.querySelectorAll('a');
  // 第二题
  let links = document.links;
  // 第三题
  let arr = Array.from(links);
  arr.forEach(item => {
    let _href = item.href;
    let host = location.host;
    let rel = item.getAttribute('rel');
    if(_href.startsWith('javascript:')) { // 1
      item.setAttribute('role', 'button');
    } else if(item.host !== host) { // 2
      item.setAttribute('target', '_blank');
      item.setAttribute('rel', rel ? rel +' extermal nofollow npppener' : 'extermal nofollow npppener');
    } else if(_href.startsWith('#')) { // 3
      item.setAttribute('rel', rel ? rel +' internal' : 'internal');
    }
  });
  return arr;
})();

[silverWolf818]

//1.
document.getElementsByTagName("a");

//2.
var links = document.links;

//3.
for (var i = 0; i < links.length; i++){
    var item = links[i];
    var host = window.location.host;
    var href = item.getAttribute('href');
    console.log(item.href);
    if(href.startsWith('javascript:')){
        item.setAttribute('role','button');
    }
    if(href.indexOf(host) === -1){
        item.setAttribute('target','_blank');
        item.setAttribute('rel', 'external nofollow noopener');
    }
    if(href.startsWith('#')){
        item.setAttribute('rel', 'internal');
    }
}

这里不能使用item.href而是使用getAttribute

因为直接.href,以"#"开头的href会带上当前页面路径在加上#

[sghweb]

//第一题
let aEle = document.querySelectorAll('a')

//第二题
let aElehref = document.querySelectorAll('a[href]')

//第三题
let reg = /^javascript/
let reg1 = /^#/
let host = document.location.host
for(var i=0;i<aElehref.length;i++){
  //第1小题
  if(reg.test(aElehref[i].href)){
    aElehref[i].setAttribute('role','button')
  }
  //第2小题
  if(host!=aElehref[i].href){
    aElehref[i].setAttribute('target','_blank')
    aElehref[i].setAttribute('rel','external nofollow noopener')
  }
  //第3小题
  //因为只有#时href会包含域名，所以去掉再判断
  // zxx: 有bug， location.href原本自带#xxxx则无效
  if(reg1.test(aElehref[i].href.split(document.location.href).join(''))){
    aElehref[i].setAttribute('rel','internal')
  }
}

[jsweber]

    //1.
    let aLinks = document.querySelectorAll('a')
    //2
    let linkElements = document.links
    //3
    for (let i = 0; i < linkElements.length; i++){
        let element = linkElements[i]
        let href = element.getAttribute('href')
        if (/^javascript:.*/.test(href)){
            //3.1
            element.setAttribute('role', 'button')

        }else if (href.match(/https?\:\/\/(.+?)\/.*/) && (RegExp.$1.indexOf(location.host) === -1) ){
            //3.2
            element.setAttribute('target', '_blank')
            element.setAttribute('rel', 'external nofollow noopener')
        }else if (/^#.*/.test(href)){
            //3.3
            element.setAttribute('rel', 'external')
        }
    }

[GCGligoudan]

// 1.获取全部a元素
const elementAs = document.querySelectorAll('a');
// 2.获取页面上全部链接元素
const elementLinks = document.querySelectorAll('*[href]');

elementLinks.forEach((value, key) => {
    const hrefValue = value.getAttribute('href');
    // 3.1
    if ( hrefValue.indexOf('javascript:') === 0) {
        value.setAttribute('role', 'button');
    }
    // 3.2
    if (hrefValue !== window.location.host) {
        value.setAttribute('target', '_blank');
        value.setAttribute('ref', 'external nofollow noopener');
    }
    // 3.3
    if (hrefValue.indexOf('#') === 0) {
        value.setAttribute('ref', 'internal');
    }
});

[zhangxinxu]

本期要点：

1. 获取所有a元素，两种方法：document.getElementsByTagName('a') 所有浏览器都支持，还有document.querySeletorAll('a')，IE8+。
2. 答案是：document.links或者document.querySelectorAll(':link')都是可以的。链接元素和<a>元素的区别：首先没有href属性的<a>元素不是链接元素，其次链接元素还包括<area>元素（带href）。document.querySelectorAll('[href]')的问题在于，普通元素设置href属性也能获取。
3. NodeList直接forEach IE浏览器不支持，Chrome、Firefox也是最近几年才支持。需要转换成数组，使用[].slice.call(links)，IE9+支持的。ES6 [...aLink]，Arrar.from((links)转数组（其实没必要，因为支持ES6也就支持NodeList直接forEach）。如有要兼容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'))