1、对样式的操作

1.1、点击按钮设置 div 的宽高和背景颜色

凡是 css 属性时由多个单词构成的，那么在 js 中设置的时候需要把 "-" 去掉，然后除第一个单词的首字母大写即可。

比如：css里面的 background-color，在js里面的写法是 backgroundColor.

1.2、点击按钮隐藏和显示 div 标签

1.3、网页开关灯

document.body 可以选中 body 标签。

1.4、阻止超链接默认跳转

<!--方式一--><!--方式二--><!--方式三-->

阻止超链接的跳转：返回给 onclick 事件一个return false，而不单单是 false。

方式二：当使用内联 js 的时候，onclick 里面是 f1() 而不是 f1。是函数的执行，而不是函数体本身。但是在外面写 js 的时候，赋值给 onclick 的是函数体本身，认不是函数的执行。

方式二中之所以加 return，是因为 f1() 执行后返回的是 false，而不是 return false，所以要加一个 return。

方式四：调用事件参数对象的 preventDefault() 方法：e.preventDefault(); 可以阻止超链接跳转。注意 IE8 不支持。

1.5、点击小图在小图下显示大图

使用 return false; 阻止链接原本的跳转。

1.6、列表高亮显示

html>
    
    
    

    
• 哈哈哈
    
• 哈哈哈
    
• 哈哈哈

1.7、通过 name 属性获取元素

通过 name 属性获取元素适用于表单标签，基本标签没有 name 属性

基本标签：div,p,h1,ul,li,br等

表单标签：input, select,option,form,textarea,datalist,label等

1.8、根据类样式的名字获取元素

    
    
    
    
第一个p标签
    
第二个p标签
    第一个span

    第二个span
    
第一个div
    
第二个div
    

    
    

注意：getElementsByClassName 在IE8等低版本浏览器不支持。

2、获取元素的方式总结

1、根据 id 的属性的值获取元素，返回值是一个元素对象

document.getElementById("id属性的值");

2、根据标签名获取元素，返回值是包含多个元素对象的伪数组

document.getElementsByTagName("标签名字");

3、根据 name 属性的值获取元素，返回值是包含多个元素对象的伪数组

document.getElementsByName("name属性的值");

4、根据 class 类样式的名字获取元素，返回值是包含多个元素对象的伪数组

document.getElementsByClassName("class类样式的值");

5、根据 CSS 选择器获取元素，返回值是一个元素对象

document.querySelector("#id属性的值");document.querySelector("标签的名字");document.querySelector(".class类样式的值");

6、根据 CSS 选择器获取元素，返回值是包含多个元素对象的伪数组

document.querySelectorAll("#id属性的值");document.querySelectorAll("标签的名字");document.querySelectorAll(".class类样式的值");

注意区分是名字还是值。

3、案例：模拟搜索框

文本框注册失去焦点事件的时候使用 this.value.length === 0，而不使用 this.value === "请输入搜索内容" 是因为数字的比较比字符串的比较效率更高。

原文出处