5.3 面试题

已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)

document.getElementById(“ID”).value

希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)

var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length;
//缓存到局部变量
while (len--) {
//使用while的效率会比for循环更高
  if (domList[len].type == ‘checkbox’) {
      checkBoxList.push(domList[len]);
  }
}

设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)

var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”
dom.style.color = “#000”

当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？

• 直接在DOM里绑定事件：
• 在JS里通过onclick绑定：xxx.onclick = test
• 通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)

那么问题来了，Javascript的事件流模型都有什么？

• “事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
• “事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
• “DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

什么是Ajax和JSON，它们的优缺点。

Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。

优点：

• 　可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量
• 　避免用户不断刷新或者跳转页面，提高用户体验

缺点：

• 　对搜索引擎不友好（
• 　要实现ajax下的前后退功能成本较大
• 　可能造成请求数的增加
• 　跨域问题限制

JSON是一种轻量级的数据交换格式，ECMA的一个子集

优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）

怎样添加、移除、移动、复制、创建和查找节点（原生JS，实在基础，没细写每一步）

1）创建新节点

createDocumentFragment()    //创建一个DOM片段

createElement()   //创建一个具体的元素

createTextNode()   //创建一个文本节点

2）添加、移除、替换、插入

appendChild()      //添加

removeChild()      //移除

replaceChild()      //替换

insertBefore()      //插入

3）查找

getElementsByTagName()    //通过标签名称

getElementsByName()     //通过元素的Name属性的值

getElementById()        //通过元素Id，唯一性