获取元素

通过使用 getElementById() 方法

document.getElementById("intro");

通过使用 getElementsByTagName() 方法

document.getElementsByTagName("p");



//返回包含文档中所有 <p> 元素的列表，并且这些 <p> 元素应该是 id="main" 的元素的后代（子、孙等等）：

document.getElementById("main").getElementsByTagName("p");

通过使用 getElementsByClassName() 方法

document.getElementsByClassName("intro");

通过使用querySelector()

document.querySelector("#demo");

通过document.querySelectorAll()获取所有的满足条件的元素，返回一个伪数组(拥有数组的属性，没有方法)

document.querySelectorAll(".example")

css样式

设置样式

document.getElementById(id).style. property = new style

eg：

//设置单个样式

document.querySelector('.content').style.border="1px solid red"



//设置多个样式cssText

document.querySelector('.content').style.cssText = "color: blue;width:10px";

设置类名

添加类名

document.classList.add('content','class2'...)

document.querySelector('div').classList.add('content')

HTMLElementObject.className=classname

document.querySelector('div').className='content'



//如果获取

document.querySelector('div').className

移除类名

document.classList.remove('class1','class2'...)

替换类名

document.classList.replace('class1(旧) ','class2(新) '...)

切换类名

document.classList. toggle(class, true|false)

说明：class：切换的样式，并返回true和false

true|false：可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。

//即使没有这样的样式的时候，仍旧切换



document.getElementById("myDIV").classList.toggle("newClassName");



//有第二个参数时

//使用true来控制该类名必须存在，即使已经存在了，也会执行，但不会重复添加，返回true

//false来控制该类名不存在，即使不存在了，也会自信，但不会重复移除，返回false

获取元素类名

document.classList.item(index)

说明：

返回元素中索引值对应的类名。索引值从 0 开始，如果索引值在区间范围外则返回 null

判断指定的类名是否存在

document.classList.contains(class)

说明：

返回布尔值

字符串

substr()：截取指定数目的字符

语法：

string.substr(start,length)

start： 必需。从第几个开始截取，开始截取的字符串下标。如果是负数，那就是从字符串的末尾开始算，也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。

length： 可选。截取几个字符。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。

例子：

var str="Hello world!";

var n=str.substr(2,3)



//输出

llo

indexOf()：在字符串中查找指定字符串

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

如果没有找到匹配的字符串则返回 -1。

需要注意的是 indexOf() 方法区分大小写

var str="Hello world, welcome to here";

var n=str.indexOf("world");

console.log(n) //6

事件

注册事件

document.onclick //所有主要浏览器都支持 onclick 事件
document.addEventListenner() // 所有浏览器，除了 IE 8 及更早IE版本
document.attachEvent() // IE 8 及更早IE版本

移除事件

document.onclick=null
document.removeEventListener()
document.detachEvent()

兼容性处理

//方案一：addEventListenner和attachEvent兼容性处理

if (document.addEventListener) {

    document.addEventListener("mousemove", myFunction);

} else if (document.attachEvent) {

    document.attachEvent("onmousemove", myFunction);

}



//方案二：使用onclick方法

js一些方法的整理