Javascript学习笔记6 DOM扩展

选择符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);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值