选择符API

querySelector()
接受一个CSS选择符,返回与该模式匹配的第一个元素,没有找到返回null

var mydiv = document.querySelector("#mydiv");

querySelectorAll()
querySelector()类似,不过其返回所有匹配的元素,即一个NodeList

var selecteds = document.querySelectorAll(".selected");

元素遍历

返回元素节点,不用担心空白的文本节点

element.childElementCount   //返回子元素的个数,不包括文本和注释

element.firstElementChild  //指向第一个子元素

element.lastElementChild  //指向最后一个子元素

element.previousElementSibling  //指向前一个同胞元素

element.nextElementSibling  //指向后一个同胞元素

HTML5

getElementsByClassName()
接受一个参数,即包含一个或多个类名的字符串,返回带有指定类的所有元素的NodeList

var a = document.getElementsByClassName("username current");

classList
元素的类名列表,包含了一些方法用于更方便的操作类名

div.classList.add("disabled");   //添加类
div.classList.remove("disabled");   //移除类
div.classList.contains("bd");    //检查是否包含某类

document.activeElement
返回当前获得焦点的元素,文档加载完毕时,是<body>元素

document.readyState
返回文档的加载状态,"loading"或者"complete"

document.charset
返回文档字符集,可以修改

document.charset = "UTF-8";

innerHTML
返回元素所有子节点(包括元素,文本和注释)的HTML标记,可以修改(<html>,<style>,<head>以及表格元素等不支持)

div.innerHTML = "hello world";

outerHTML
innerHTML属性类似,但是其不仅返回子节点,还返回调用元素本身的HTML标记

scrollIntoView()
通过滚动浏览器窗口或某个容器元素,使调用元素出现在视口中。如果传入true或不传参数,则元素顶部将会与视口顶部尽量平齐,如果传入false,那么元素将会尽可能地全部出现在视口中

doucument.forms[0].scrollIntoView(); 

contains()
查找某个节点是不是另一个节点的后代,是则返回true,否则返回false

div.contains(someElement);
Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐