《javascript高级程序设计》读书笔记(八)

时间:2020-7-31 作者:admin

又是一个很多人都已沉沉睡去的夜晚,我又掀开电脑开始啃书了。
孔子曰:“温故而知新_,可以为师矣。”

华丽的分割线————-让我们开始吧———————-

第11章 DOM扩展

Selectors API是由W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询。它的核心是两个方法:querySelector()和querySelectorAll()

querySelector()方法:接受一个CSS选择符,返回与该模式匹配的第一个元素,如果没有返回null。
querySelectorAll()方法接收的参数与querySelector()方法一样,但是返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例。

var body = document.querySelector("body");
var myDiv = document.querySelector("#myDiv");
var ems = document.getElementById("myDiv").querySelectorAll("em");
var selecteds = document.querySelectorAll(".selected");

通过Document类型调用querySelector()方法时,会在文档元素的范围内查找匹配的元素。而通过Element类型调用querySelector()方法时,只会在该元素后代元素的范围内查找匹配的元素。

getElementsByClassName()方法,返回带有指定类的所有元素的NodeList。

var allCurrentUsernames = document.getElementsByClassName("username current");
var selected = document.getElementById("myDiv").getElementByClassName("selected");

classList属性,是HTML5新增的一种操作类名的方式。

div.classList.remove("disabled");  //删除"disabled"类
div.classList.add("current");      //添加"current"类
div.classList.toggle("user");      //切换"user"类,如果列表存在给定的值,删除它;如果列表中没有给定的值,添加它。

支持classList属性的浏览器有Firefox3.6+和Chrome。

焦点管理:首先就是document.activeElement属性,这个属性始终会引用DOM中当前获得了焦点的元素。
元素获得焦点的方式有页面加载、用户输入(通常按Tab键)和在代码中调用focus()方法。

var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button);       //true

默认情况下,文档刚刚加载完成时,document.activeElement中保存的是document.body元素的引用。文档加载期间,document.activeElement的值为null。

另外就是新增了document.hasFocus()方法,这个方法用于确定文档是否获得了焦点。

var button = document.getElementById("myButton");
button.focus();
alert(document.hasFocus());  //true

通过检测文档是否获得了焦点,可以知道用户是不是正在与页面交互。
查询文档获知哪个元素获得了焦点,以及确定文档是否获得了焦点,这两个功能最重要的用途是提高Web应用的无障碍性。
无障碍Web应用的一个主要标志就是恰当的焦点管理,而确切地知道哪个元素获得了焦点是一个极大的进步。

readState属性有两个可能的值:loading-正在加载文档,complete-已经加载完文档。
使用document.readyState的最恰当方式,就是通过它来实现一个指示文档已经加载完成的指示器。

if(document.readyState == "complete"){
    //执行操作
}

HTML5规定可以为元素添加非标准的属性,但要添加前缀data- , 目的是为元素提供与渲染无关的信息,或者提供语义信息。
<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
添加了自定义属性之后,可以通过元素的dataset属性来访问自定义属性的值。

var div = document.getElementById("myDiv");
var appId = div.dataset.appId;  //取得自定义属性的值
var myName = div.dataset.myname;
div.dataset.appId = 23456;   //设置值
div.dataset.myname = "Micheal";
if(div.dataset.myname){
    alert("Hello, " + div.dataset.myname);
}

插入标记-innerHTML属性
在读模式下,innerHTML属性返回与调用元素的所有子节点(包括元素、注释和文本节点)对应的HTML标记。
在写模式下,innerHTML会根据指定的值创建新的DOM树,然后用这个DOM树完全替换调用元素原先的所有子节点。
不同浏览器返回的文本格式会有所不同,IE和Opera会将所有标签转换为大写形式,而其他的会返回原本的格式。
使用innerHTML属性也有一些限制。比如,在大多数浏览器中,通过innerHTML插入<script>元素并不会执行其中的脚本。如果想插入这段脚本,必须在前面添加一个”有作用域的元素”,可以是一个文本节点,也可以是一个没有结束标签的元素如<input>。
div.innerHTML = "<input type=\"hidden\"><script defer>alert('hi');<\/script>";//不推荐

插入标记-outerHTML属性
在读模式下,outerHTML返回调用它的元素及所有子节点的HTML标签。
在写模式下,outerHTML会根据指定的HTML字符串创建新的DOM子树,然后用这个DOM子树完全替换调用元素。

插入标记-insertAdjacentHTML()方法
insertAdjacentHTML()方法接收两个参数:插入位置和要插入的HTML文本。

element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");   //作为前一个同辈元素插入
element.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>");   //作为第一个子元素插入
element.insertAdjacentHTML("beforeend", "<p>Hello world!</p>");   //作为最后一个子元素插入
element.insertAdjacentHTML("afterend", "<p>Hello world!</p>");   //作为后一个同辈元素插入

注意:使用以上介绍的方法替换子节点,可能会导致浏览器的内存占用问题。
scrollIntoView()方法,通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视口中。
如果传true作为参数,或不传,那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传false作为参数,调用元素会尽可能全部出现在视口中。顶部不一定平齐。
document.forms[0].scrollIntoView(); //让元素可见

children属性:只包含元素中同样还是元素的子节点。除此之外,children属性与childNodes没有区别,即在元素只包含元素子节点时,这两个属性的值相同。

contains()方法,不通过在DOM文档树中查找即可获得这个信息,调用contains()方法的应该是祖先节点,也就是搜索开始的节点。
alert(document.documentElement.contains(document.body)); //true 这个例子测试了<body>元素是不是<html>元素的后代

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。