前端面试题 - webAPI
前端面试题 - webAPI
元素操作
JS动态创建节点
请补全JavaScript函数，根据参数数组创建li元素。
要求：
- li元素的个数和数组的长度一样
- li元素的内容是数组中的每个元素
- 将创建的所有li元素插入到ul中
// innerHTML
function createLi(array){
// 补全代码
var lis;
array.forEach((ele)=>{
lis+=`${ele} `;
})
document.getElementsByTagName("ul")[0].innerHTML+=lis;
}
// appendChild
function createLi(array){
// 补全代码
for(let i=0; i根据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元素。
操作地址栏
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 加载新文档