前端面试题 - webAPI

元素操作

JS动态创建节点

请补全JavaScript函数，根据参数数组创建li元素。
要求：

  1. li元素的个数和数组的长度一样
  2. li元素的内容是数组中的每个元素
  3. 将创建的所有li元素插入到ul中
// innerHTML
function createLi(array){
    // 补全代码
    var lis;
    array.forEach((ele)=>{
      lis+=`<li>${ele}</li>`;
    })
    document.getElementsByTagName("ul")[0].innerHTML+=lis;
}
// appendChild
function createLi(array){
    // 补全代码
    for(let i=0; i<array.length; i++){
     let li=document.createElement('li');
     let ul=document.getElementsByTagName('ul')[0]
        li.innerHTML=array[i];
        ul.appendChild(li) 
    }
}

根据ID获取元素

请补全JavaScript函数，根据id获取html模块中ul标签下第二个li元素并返回。

function getLI(id){
    // 补全代码
    return document.querySelector('#'+id) // 带//#
    return document.getElementById(id); // 不带#
}

JS修改元素内容

请补全JavaScript函数，将类为"box"的div元素内容修改为"欢迎来到牛客网"。

function modifyText(){
    // 补全代码
    document.querySelector('.box').innerHTML = "欢迎来到牛客网"
}

function modifyText(){
   return document.getElementsByClassName('box')[0].innerHTML='欢迎来到牛客网';
    
//getElementsByClassName()  这个方法可以获得页面
    
//所有该类的元素内容，所以后面加个[0]表示只取第一个该类元素。
    
}

绑定事件

阻止冒泡事件

请补全JavaScript函数，要求在点击li元素的时候不触发ul的事件。
注意：需要自行获取li元素。

let li = document.getElementsByTagName('li')[0];
  li.onclick = function(e){
       e=window.event||e;
        if(document.all){  //只有ie识别
            e.cancelBubble=true;
        }else{
            e.stopPropagation();
        }
  }

事实上stoppropagation和cancelBubble的作用是一样的，都是用来阻止浏览器默认的事件冒泡行为。

不同之处在于stoppropagation属于W3C标准，试用于Firefox等浏览器，但是不支持IE浏览器。相反cancelBubble不符合W3C标准，而且只支持IE浏览器。所以很多时候，我们都要结合起来用。不过，cancelBubble在新版本chrome,opera浏览器中已经支持。

阻止默认事件

请补全JavaScript函数，要求在点击id为"checkbox"的复选框时不会取消勾选状态。
注意：需要自行获取input元素。

<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
        <form>
            <label>牛客会陪伴大家</label>
            <input id="checkbox" type="checkbox" checked />
        </form>
    </body>
    <script type="text/javascript">
        // 补全代码
        var input = document.getElementById('checkbox')
        input.addEventListener('click',function(e){e.preventDefault();})
    </script>
</html>

操作地址栏

url地址

请补全JavaScript函数，实现一个函数返回页面当前url。

function getUrlHref (){
    return location.href;
}

window.location 对象可不带 window 前缀书写。

一些例子：

  • window.location.href 返回当前页面的 href (URL)
  • window.location.hostname 返回 web 主机的域名
  • window.location.pathname 返回当前页面的路径或文件名
  • window.location.protocol 返回使用的 web 协议（http: 或 https:）
  • window.location.assign 加载新文档

Lee2