JS编程题（DOM）

编写可动态添加新元素的代码

function addElementImg(obj) {
　　　　var ul = document.getElementById(obj);
　　　　var li = document.createElement("li");
　　　　var img = document.createElement("img");
　　　　img.setAttribute("id", "newImg");
　　　　img.src = "/images/prod.jpg";
　　　　li.appendChild(img);
　　　　ul.appendChild(li);

提交表单

document.form[0].submit();

改变元素样式

document.getElementById(‘mybtn').style.frontSize=20;

改变元素类

document.getElementById(‘mybtn').className="lailai";

获得checkBox的状态

alert（document.getElementById('checkBox1').checked）;

获得所有checkBox的值

var domlist=document.getElementByTagName('input');
var check=[];
var len=domlist.length;
while(len--){
if(domlist[len].type==='checkbox')
check.push(domlist[len])

在body中添加元素

body.appendChild("<p>");

获取Input输入框的输入值：

document.getElementById("sd").value

（a）当用户点击“Button 4”的时候会输出什么到控制台，为什么？
（a）无论用户点击什么按钮，数字5将总会输出到控制台。这是因为，当 onclick 方法被调用（对于任何按钮）的时候， for 循环已经结束，变量 i 已经获得了5的值。（面试者如果能够谈一谈有关如何执行上下文，可变对象，激活对象和内部“范围”属性贡有助于闭包行为，则可以加分）。

for (var i = 0; i < 5; i++) {  var btn = document.createElement('button');
  btn.appendChild(document.createTextNode('Button ' + i));
  btn.addEventListener('click', (function(i) {    return function() { console.log(i); };
  })(i));  document.body.appendChild(btn);
}

设计一个已知ID的div，内容是XXX,字体颜色为黑色

var dom=document.getElementById("id");
dom.innerHtml="XXX";
dom.style.color="#000";

检索表单中的文本框，并清空

for(vari=0;i<document.forms.length; i++){
for(var j=0;j<document.forms.elements.length; j++){
if(document.forms.elements[j].type==”text”)
document.forms.elements[j].value=”";}
}

补充按钮事件的函数，确认用户是否退出当前页面，确认之后关闭窗口

function closeWin(){
if(confirm(“确定要退出吗？”)){
window.close();
}
}

编写一个JavaScript函数，输入指定类型的选择器(仅需支持id，class，tagName三种简单CSS选择器，无需兼容组合选择器)可以返回匹配的DOM节点，需考虑浏览器兼容性和性能。

var query = function(selector) {
var reg = /^(#)?(\.)?(\w+)$/img;
var regResult = reg.exec(selector);
var result = [];
//如果是id选择器
if(regResult[1]) {
if(regResult[3]) {
if(typeof document.querySelector === "function") {
result.push(document.querySelector(regResult[3]));
    }else {
      result.push(document.getElementById(regResult[3]));
    }
   }
   }
   //如果是class选择器
   else if(regResult[2]) {
      if(regResult[3]) {
       if(typeof document.getElementsByClassName === 'function') {
         var doms = document.getElementsByClassName(regResult[3]);
         if(doms) 
            result = converToArray(doms);
         }
       }  //如果不支持getElementsByClassName函数
     else {
        var allDoms = document.getElementsByTagName("*") ;
       for(var i = 0, len = allDoms.length; i < len; i++) {
         if(allDoms[i].className.search(new RegExp(regResult[2])) > -1) {
           result.push(allDoms[i]);    }   }   } }}
  //如果是标签选择器
  else if(regResult[3]) {
    var doms = document.getElementsByTagName(regResult[3].toLowerCase());
    if(doms) {
      result = converToArray(doms);
    }
  }
  return result;
  }

用户第一次进来的时候，显示tip，同一天访问该页面，不显示tip，用户单击“XXX”，此后访问页面不显示tip

 function setcookie(name,value,days){  //给cookie增加一个时间变量
　　var exp = new Date();
　　exp.setTime(exp.getTime() + days*24*60*60*1000); //设置过期时间为days天
　　document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name){
　　var result = "";
　　var myCookie = ""+document.cookie+";";
　　var searchName = "+name+"=";
　　var startOfCookie = myCookie.indexOf(searchName);
　　var endOfCookie;
　　if(satrtOfCookie != -1){
　　　　startOfcookie += searchName.length;
　　　　endOfCookie = myCookie.indexOf(";",startOfCookie);
　　　　result = (myCookie.substring(startOfCookie,endOfCookie));
　　}
　　return result;
}
(function(){
　　var oTips = document.getElementById('tips');//假设tips的id为tips
　　var page = {
　　check: function(){//检查tips的cookie是否存在并且允许显示
　　　　var tips = getCookie('tips');
　　　if(!tips || tips == 'show') return true;//tips的cookie不存在
　　　　if(tips == "never_show_again") return false;
　　},

　　hideTip: function(bNever){
　　　　if(bNever) setcookie('tips', 'never_show_again', 365);
　oTips.style.display = "none";//隐藏
　　},
　　showTip: function(){
　　oTips.style.display = "inline";//显示，假设tips为行级元素
　　},
　　init: function(){
　　　　var _this = this;
　　　if(this.check()){
　　　　_this.showTip();
　　　　setcookie('tips', 'show', 1);
　　}
　　oTips.onclick = function(){
　　　　_this.hideTip(true);　};　}　};
  page.init();
})();

使用js实现这样的效果：在文本域里输入文字时，当按下enter键时不换行，而是替换成“{{enter}}”,(只需要考虑在行尾按下enter键的情况).

textarea.function(e){
  e.preventDefault();//为了阻止enter键的默认换行效果
  if(e.keycode==”enter键码”){
    testarea.value+=”{{enter}}”;
  }
}