DOM扩展:HTML5
来源:互联网 发布:炉石传说淘宝刷金币 编辑:程序博客网 时间:2024/06/17 16:48
1.与类相关的扩展
- getElementsByClassName()
只接收一个参数,即包含一个或者多个类名的字符串,返回带有指定类的所有元素的NodeList。(包含多个类名时,类名的先后顺序无所谓)
//取得所有类中包含username和current的元素,类名的先后顺序无所谓var allCurrentUsernames=document.getElementByClassName("username current");//取得ID为"myDiv"元素中带有类名"selected"的所有元素var selected=document.getElementById("myDiv").getElementByClassName("select");
2.焦点管理
- document.activeElement属性:引用DOM中当前获得焦点的元素
var button=document.getElementById("myButton");button.focus();alert(document.activeElement===button);//document.activeElement指向当前获得焦点的元素
- document.hasFocus():确定文档是否获得了焦点
var button=document.getElementById("myButton");button.focus();alert(document.hasFocus());//true
3.自定义数据属性
可以添加自定义的非标准的属性,但是要添加前缀data-。
- dataset属性:访问和设定自定义的属性
<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>//获取自定的属性的值var appId=div.dataset.appId;//设置自定义属性的值div.dataset.myname="Curry";
4.插入标记(innerHTML、outerHTML)
一般DOM操作方法:很麻烦!!!不仅要创建一系列DOM节点,而且还要小心地按照正确地顺序把它们连接起来。
innerHTML属性(outerHTML相类似)
读的状态下: innerHTML返回与调用元素的所有节点(包括元素、注释和文本节点)对应的HTML标记。
写的模式下: innerHTML会根据指定的值创建新的DOM树,然后用这个DOM树完全替换调用元素原先的所有子节点。
<div id="content"> <p>This is a <strong>paragraph</strong> with a list following</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div>//innerHTML读的状态 <script> var content=document.querySelector("#content"); alert(content.innerHTML); //返回整个div的所有子节点 </script>
//innerHTML写的状态下div.innerHTML="Hello world";//但是设置的值和解析后的值确有差异:div.innerHTML="Hello & welcome, <b>\"reader\"!</b>";<div id="content">Hello & welcome, <b>"reader"!</b></div>
- insertAdjacentHTML()方法:插入标记
接收两个参数:插入的位置和要插入的HTML文本
插入的位置必须为以下四个之一:
beforebegin:在当前元素之前插入一个紧邻的同辈元素
afterbegin:在当前元素之下插入新的子元素或在第一个子元素之前再插入新的子元素
beforeend:在当前元素之下插入新的子元素或在最后一个子元素之前再插入新的子元素
afterend:在当前元素之后插入一个紧邻的同辈元素
//作为前一个同辈元素插入element.inserAdjacentHTML("beforebegin","<p>Hello world!</p>");
阅读全文
0 0
- HTML5之DOM扩展
- DOM扩展:HTML5
- DOM 扩展 :理解Selectors API、使用HTML5 DOM扩展、了解专有的DOM扩展
- HTML5——语义化表单多媒体DOM扩展
- html5 -DOM
- DOM扩展
- DOM扩展
- DOM扩展
- DOM扩展
- DOM扩展
- DOM扩展
- DOM扩展
- DOM扩展
- JavaScript高级程序设计之DOM 扩展之HTML5之焦点管理第11.3.2讲
- JavaScript高级程序设计之DOM 扩展之HTML5之HTMLDocument的变化第11.3.3讲
- JavaScript高级程序设计之DOM 扩展之HTML5之字符集属性第11.3.4讲
- JavaScript高级程序设计之DOM 扩展之HTML5之自定义数据属性第11.3.5讲
- JavaScript高级程序设计之DOM 扩展之HTML5之插入标记第11.3.6讲
- SSH框架搭建实测可用
- Git详解之五 分布式Git
- SpringMVC导出Excel
- Python读取excel指定列生成指定sql脚本
- 用Beautiful Soup进行屏幕抓取
- DOM扩展:HTML5
- JSONObject和JSONArray的操作
- 先码后看 Collection的sort方法 侵立删
- 四种强制类型转换的总结(const_cast、static_cast、dynamic_cast、reinterpreter_cast)
- Test
- Git详解之六 Git工具
- 【Git】安装以及第一次使用Git和GitHub傻瓜教程
- 使用Myeclipse10建立WebService工程的配置详解(附例程)
- fastjson解释json和object问题