Javascript学习笔记6 DOM扩展
选择符APIquerySelector()接受一个CSS选择符,返回与该模式匹配的第一个元素,没有找到返回nullvar mydiv = document.querySelector("#mydiv");querySelectorAll()与querySelector()类似,不过其返回所有匹配的元素,即一个NodeListvar selecteds = doc
选择符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);
更多推荐
所有评论(0)