quiz DOM基础测试34

本期题目如下：

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

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

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

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

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

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

Jul 10 '19 13:07 zhangxinxu

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

Jul 10 '19 13:07 smiledpeace

第 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');
});

Jul 10 '19 14:07 wingmeng

document.querySelectorAll('a')

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

Jul 10 '19 14:07 NeilChen4698

var links = querySelectorAll("a")
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") }

Jul 10 '19 14:07 9lk

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

Jul 10 '19 14:07 fzpijl

        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{
                //扩展以后的规则
            }
        })

Jul 10 '19 14:07 guqianfeng

 let NodeList_A=  document.querySelectorAll("a")

// 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")
    }
})

Jul 10 '19 14:07 wang-baojin

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


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

            })

Jul 10 '19 14:07 jiyihui

        <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]);
		}
	}

Jul 10 '19 14:07 ZhangXDong

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

Jul 10 '19 14:07 xuejianrong

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

Jul 10 '19 15:07 livetune

// 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');
}

Jul 10 '19 15:07 brenner8023

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{
        //不处理
    }
})

Jul 10 '19 15:07 XboxYan

// 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');
}

Jul 10 '19 15:07 Despair-lj

//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");
    }
});

Jul 10 '19 16:07 kuikuiGe

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

Jul 10 '19 16:07 Seasonley

// 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)
}

Jul 11 '19 02:07 ghost

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

Jul 11 '19 02:07 smileyby

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

Jul 11 '19 03:07 WWR1234567

第一题

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

Jul 11 '19 04:07 bugaosunihhh

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

Jul 11 '19 04:07 lifelikejuly

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

Jul 11 '19 04:07 les-lee

document.querySelectorAll('a')

document.links

document.querySelector(':link")

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

Jul 11 '19 05:07 flyinglove


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

Jul 11 '19 05:07 liuyueji

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

Jul 11 '19 07:07 leisure-wang

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

Jul 11 '19 08:07 frankyeyq

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

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

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

Jul 11 '19 09:07 ylqlalala

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

Jul 11 '19 09:07 liyongleihf2006

// 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');
   }
})

Jul 11 '19 09:07 JaimeCheng

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

Jul 11 '19 11:07 asyncguo

quiz quiz copied to clipboard

DOM基础测试34

第 1 题：

第 2 题：

第 3 题：

quiz
quiz copied to clipboard