《JS高程(3)》DOM扩展-HTML5-第11章笔记(20)
来源:互联网 发布:电脑位数怎么看 mac 编辑:程序博客网 时间:2024/06/08 13:44
HTML5
HTML5规范围绕如何使用新增标记定义了大量JavaScriptAPI。其中一些API与DOM重叠,定义了浏览器应该支持的DOM扩展。
与类相关的扩充
HTML5 新增了很多API,致力于简化CSS类的用法。
- getElementsByClassName()方法
通过document对象及所有HTML元素调用该方法,接受一个参数:一个包含类名的字符串,返回带有指定累的所有元素的NodeList。
// 取得所有类中包含"username"和"current"的元素var allCurrentUsernames = document.getElementsByClassName("username current");//取得ID为"myDiv"的元素中带有类名"selected"的所有元素var selected = document.getElementById("myDiv").getElementByClassName("selected");
因返回的对象是NodeList,所以存在于getElementByTagName()以及其他返回NodeList的DOM方法都具有相同的性能问题。
- classList属性
在操作类名时,需要通过className属性添加、删除和替换类名。因此className中是一个字符串,及时修改字符串一部分,也必须每次都设置整个字符串:
<div class = "bd user disabled">...</div>
该元素共三个类名,要删除其中一个,需要把类名拆开,删除不想要的类名,再把其他类名拼成一个新字符串。
//删除"user"类//首先,取得类名字符串并拆分成数组var classNames = div.className.split(/\s+/);//找到要删的类名var pos = -1, i, len;for (i = 0, len = classNames.length; i < len; i++){ if (className[i] == "user"){ pos = i break; }}//删除类名classNames.splice(i,1);//把剩下的类名拼成字符串并重新设置div.className = classNames.join("");
HTML5新增了种操作类名的方式,为所元素添加了classList属性。
classList属性是新集合类型DOMTokenList的实例。
DOMTokenList有length属性,取得每个元素使用item()方法和’[]’
//删除“disabled”类div.classList.remove (disabled);//添加“current”类div.classList.add("current");//切换“user”类div.classList.toggle("current");// 确定元素中是否包含既定的类名if (div .classList.contains("bd") && !div.classList.contains("disabled")){ //执行操作}//类名迭代for (var i = 0, len = div.classList.length; i < len ; i++){ doSomething(div.classList[i]);}
支持classList属性的浏览器有Firefox3.6+和Chrome
- 焦点管理
HTML5添加了辅助管理DOM焦点的功能:document.activeElement属性,始终引用DOM中当前获得了焦点的元素。
元素获得焦点的方式有页面加载、用户输入(通常是通过TAB键)和在代码中调用focus()方法:
var button = document.getElementById("myBotton");//赋予焦点button.focus();alert{document.activeElement === button}
<script type="text/javascript">function setFocus() { //获得焦点 document.getElementById('check1').focus() }function loseFocus() { //移除焦点 document.getElementById('check1').blur() }</script><form><input type="checkbox" id="check1" /><br /><input type="button" onclick="setFocus()" value="Set focus" /><input type="button" onclick="loseFocus()" value="Lose focus" /></form>
document.hasFocus()方法
用于确定文档是否获得了焦点
var button = document.getElementById("myButton");button.focus();alert(document.hasFocus); //true
通过检测文档是否获得了焦点,可以知道用户是不是正在和页面交互。
通过确定用户是否获得焦点,可以提高Web应用的无障碍性,确切的知道哪个元素获得焦点。
- HTMLDocument的变化
HTML5扩展了HTMLDocument:
<body>
元素的补充5. 字符集属性
HTML5新增了与文档字符集有关的属性:
<meta>
元素响应头部或直接设置charset属性修改值6. 自定义数据属性
HTML5规定可以为元素添加非标准的属性。但要添加data-,目的是为元素提共与渲染无关的信息。
<div id = "myDiv" data-appId = "12345" data-myname = "Nicholas"></div>
通过元素的dataset属性来访问自定义属性的值,dataset属性的值是DOMStringMap的一个实例,也就是一个键值对。每个data-name形式的属性都会有一个对应的属性,只不过属性名没哟data-前缀(比如,自定义属性是data-myname,在映射中对应的属性是myname):
//本例中使用的方法就用于演示var div = document.getElementById("myDiv");//取得自定义属性的值var appId = div.dataset.appId ;var myName = div.dataset.myname;//设置值div.dataset.appId = 23456;div.dataset.myname = "Michael";//有没有"myname"值?if (div.dataset.myname){ `alert("Hello," + div.dataset.myname);}
给元素添加一些不可见的数据以便处理,就需要用到自定义数据属性,在跟踪连或混搭应用中,通过自定义数据属性能方便的知道点击页面来自哪个部分。
支持浏览器:Firefox6+和Chrome
- 插入标记
innerHTML属性:返回与调用元素的所有子节点对应的HTML标记。
innerHTML会根据指定的只创建新的DOM树。然后用这个DOM树完全替换调用元素原先的子节点:
<div id = content> <p>This is a <strong>paragraph</strong>with a list following it.</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul></div>
innerHTML属性返回的字符串:
<p>This is a <strong>paragraph</strong>with a list following it.</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul>
IE和Opera会将所有标签转化为大写形式,而Safari、Chrome、Firefox则会按照原先文档中的格式返回HTML,包括空格和缩进。
在写模式下,innerHTML的值会被解析为DOM子树,替换调用元素原来的所有子节点:
div.innerHTML = "Hello & welcome, <b>\"reader\"!</b>";//得到结果//设置了innerHTML之后,可以像访问文档中的其他节点一样访问新厂家呢的节点。<div id = "content">Hello & welcome, <b>&quto;reader"!</b></div>
outerHTML属性:返回调用它的元素及所有子节点的HTML标签。
outerHTML会根据指定的HTML字符串创建新的DOM子树,然后用这个DOM子树完全替换调用元素。
<div id = content> <p>This is a <strong>paragraph</strong>with a list following it.</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul></div>
调用<div>
元素上调用outerHTML,返回与使用innerHTML属性时存在差异性质。
div.outerHTML = "<p>this is a paragraph.</p>";
这行代码完成的操作与下面这些DOM脚本代码一样:
var p = document.createElement("p");p.appendChild(document.createTextNode("this is a paragraph."));div.parentNode.replaceChild(p, div);
新创建的<p>
元素回取代DOM树中的<div>
元素。
insertAdjacentHTML()方法
插入标记的最后一个新增方式是insertAdjacentHTML()方法。这个方法最早也是在IE中出现的,接受两个参数:插入位置和要插入的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>");
内存和性能问题
替换子节点可能会导致浏览器的内存占用问题,在删除带有事件处理程序或引用了其他JavaScript对象子树是,就有可能导致内存占用问题。
假设某个元素有一个事件处理程序(或者引用了一个JavaScript对象作为属性),在使用前述某个属性将该元素从文档树中删除后,元素与事件处理程序(或JavaScript对象)之间的绑定关系在内存中并没有一并删除,会导致页面占用的内存数量就会明显增加。
因此在使用innerHTML、outerHTML属性和insertAdjacentHTML()方法时,最好手工删除要被替换的元素的所有事件处理程序和JavaScript对象属性。
在设置innerHTML或outerHTML时,就会创建一个HTML解析器。创建和销毁HTML解析器也会带来性能损失,所以innerHTML或outerHTML设置的次数控制在合理的范围内。
for (var i = 0, len = values.length; i < len; i++){ //要避免这种频繁操作 ul.innerHTML += "<li>" + values[i] + "</li>";}
var itemHTML = "";//单独构建字符串,再一次性将结果字符串赋值给innerHTMLfor (var i = 0, len = values.length; i < len; i++){ itemHTML += "<li>" + values[i] + "</li>";}ul.innerHTML= itemHTML ;
- scrollIntoView()方法
HTML5通过规定scrollIntoView()方法,控制滚动页面。
scrollIntoView(“布尔值”)
true:调用元素出现在视口中,调用元素的顶部与视口顶部平齐;
false:调用元素出现在视口中,调用元素的底部与视口底部平齐;
<a onClick="onc()">dasdasd</a><div style="width:400px; height:400px; border: 1px solid #f00;"></div><div id="nn" style="border:1px solid #666"> <div style="height:900px;">sadasdasd</div> </div><script type="text/javascript">//作为一个事件的函数来被调用function onc () { var dd = document.getElementById("nn").scrollIntoView(true); //这个意思其实就是将这个元素到顶部来浏览器窗口的顶部来显示 }</script>
- 《JS高程(3)》DOM扩展-HTML5-第11章笔记(20)
- 《JS高程(3)》DOM扩展-专有扩展-第11章笔记(21)
- 《JS高程(3)》DOM扩展-API选择符-第11章笔记(18)
- 《JS高程(3)》DOM扩展-元素遍历-第11章笔记(19)
- 《JS高程(3)》DOM节点层次Node类型-第10章笔记(11)
- 《JS高程(3)》DOM节点层次Document类型-第10章笔记(12)
- 《JS高程(3)》DOM节点层次Element类型-第10章笔记(13)
- 《JS高程(3)》DOM节点层次Text类型-第10章笔记(14)
- 《JS高程(3)》DOM节点层次Comment类型-第10章笔记(15)
- 《JS高程(3)》DOM节点层次CDATASection类型-第10章笔记(15)
- 《JS高程(3)》DOM节点层次DocumentType类型-第10章笔记(16)
- 《JS高程(3)》DOM操作技术-第10章笔记(17)
- 《JS高程(3)》DOM2和DOM3-DOM变化-第12章笔记(22)
- DOM扩展 ---高程笔记
- 《JS高程(3)》-第6章笔记(01)
- 《JS高程(3)》-第6章笔记(02)
- 《JS高程(3)》-第6章笔记(03)
- 《JS高程(3)》原型链继承模式 -第6章笔记(04)
- 数据挖掘中的模式发现(八)轨迹模式挖掘、空间模式挖掘
- 关于科学上网和编辑器
- 怎样理解JAVA中面向对象?
- 缓慢回到顶部
- 不用第三方比变量,交换2个变量的值
- 《JS高程(3)》DOM扩展-HTML5-第11章笔记(20)
- 对map的value值排序
- yii接值方式判断以及获取当前用户ip
- springBatch多线程设置
- ArcGIS Server无法访问服务案例处理
- Python IDE专用编辑器PyCharm下载及配置安装过程(Ubuntu环境)
- IDEA——开发工具快捷键
- Mac应用编程指南之三——核心应用设计
- 取出分组之后每组前10条数据 oracle