编写可动态添加新元素的代码
function addElementDiv(obj) {
var parent = document.getElementById(obj);
var div = document.createElement("div");
div.setAttribute("id", "newDiv");
div.innerHTML = "js 动态添加div";
parent.appendChild(div);
function addElementLi(obj) {
var ul = document.getElementById(obj);
var li = document.createElement("li");
li.setAttribute("id", "newli");
li.innerHTML = "js 动态添加li";
ul.appendChild(li);
}
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
for (var i = 0; i < 5; i++) { var btn = document.createElement('button');
btn.appendChild(document.createTextNode('Button ' + i));
btn.addEventListener('click', function(){ console.log(i); }); document.body.appendChild(btn);
}
（a）当用户点击“Button 4”的时候会输出什么到控制台，为什么？（b）提供一个或多个备用的可按预期工作的实现方案。
（a）无论用户点击什么按钮，数字5将总会输出到控制台。这是因为，当 onclick 方法被调用（对于任何按钮）的时候， for 循环已经结束，变量 i 已经获得了5的值。（面试者如果能够谈一谈有关如何执行上下文，可变对象，激活对象和内部“范围”属性贡有助于闭包行为，则可以加分）。
（b）要让代码工作的键是，通过传递到一个新创建的函数对象，在每次传递通过 for 循环时，捕捉到 i 值。下面是三种可能实现的方法：
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);
}
或者，你可以封装全部调用到在新匿名函数中的 btn.addEventListener ：
for (var i = 0; i < 5; i++) { var btn = document.createElement('button');
btn.appendChild(document.createTextNode('Button ' + i));
(function (i) {
btn.addEventListener('click', function() { console.log(i); });
})(i); document.body.appendChild(btn);
}
也可以调用数组对象的本地 forEach 方法来替代 for 循环：
['a', 'b', 'c', 'd', 'e'].forEach(function (value, i) { var btn = document.createElement('button');
btn.appendChild(document.createTextNode('Button ' + i));
btn.addEventListener('click', function() { console.log(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=”";}
}
要将页面的状态栏中显示“已经选中该文本框”，下列JavaScript语句正确的是（ A ）
A. window.status=”已经选中该文本框”
B. document.status=”已经选中该文本框”
C. window.screen=”已经选中该文本框”
D. document.screen=”已经选中该文本框”
补充按钮事件的函数，确认用户是否退出当前页面，确认之后关闭窗口
<html>
<head>
<script type=”text/javascript” >
function closeWin(){
//在此处添加代码
if(confirm(“确定要退出吗？”)){
window.close();
}
}
</script>
</head>
<body>
<input type=”button”value=”关闭窗口”onclick=”closeWin()”/>
</body>
</html>
编写一个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;
}
function converToArray(nodes){
var array = null;
try{
array = Array.prototype.slice.call(nodes,0);//针对非IE浏览器
}catch(ex){
array = new Array();
for( var i = 0 ,len = nodes.length; i < len ; i++ ) {
array.push(nodes[i])
}
}
return array;
}
if(window.addEventListener){
var addListener = function(el,type,listener,useCapture){
el.addEventListener(type,listener,useCapture);
};
}
else if(document.all){
addListener = function(el,type,listener){
el.attachEvent("on"+type,function(){
listener.apply(el);
});
}
}
不应该在if和else语句中声明addListener函数，应该先声明；
不需要使用window.addEventListener或document.all来进行检测浏览器，应该使用能力检测；
由于attachEvent在IE中有this指向问题，所以调用它时需要处理一下
function addEvent(elem, type, handler){
if(elem.addEventListener){
elem.addEventListener(type, handler, false);
}else if(elem.attachEvent){
elem['temp' + type + handler] = handler;
elem[type + handler] = function(){
elem['temp' + type + handler].apply(elem);
};
elem.attachEvent('on' + type, elem[type + handler]);
}else{
elem['on' + type] = handler;
}
}
用户第一次进来的时候，显示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.onkeydown=function(e){
e.preventDefault();//为了阻止enter键的默认换行效果
if(e.keycode==”enter键码”){
testarea.value+=”{{enter}}”;
}
}