DOM中的一些其余操做

1焦点

通常input元素中的输入框，按钮

<a>标签

能够用到这个方法

element.focus() 为元素设置焦点

element.hasfocus()检测元素是否具备焦点

通常在文本框具备光标，或者点击按钮或者连接时，那个元素便具备了焦点

2 自定义属性

在本身定义的属性前面加上data-

这个属性便成为了一个自定义的属性

能够用来标识一个标签

<div data-myname="ss"></div>

这里data-myname即是一个自定义属性

假设获取到了div的对象，名为odiv

那么访问这个属性的方法为

odiv.dataset.myname  用div的dataset属性来访问，同时去掉data-

也能够修改这个属性的值

odiv.dataset.myname =“a”

3 innerHTML  outerHTML 

innerHTML标签一个标签内部的全部内容

outerHTML表示包含标签和它内部的全部内容

<div>

<ul>

<li></li>

<li></li>

<li></li>

</ul>

</div>

odiv.innerHTML 获得的是

<ul>

<li></li>

<li></li>

<li></li>

</ul>

odiv.outerHTML获得的是

<div>

<ul>

<li></li>

<li></li>

<li></li>

</ul>

</div>

能够经过这两个属性来取值，同时也能够修改

若是对innerHTML进行从新赋值（赋值的内容能够是字符串，也能够是html代码），则标签内部的内容会被所有替换

odiv.innerHTML="<p></p>"

那么就会变成

<div>

<p>

</p>

</div>

若是对innerHTML进行从新赋值（赋值的内容能够是字符串，也能够是html代码），则全部的内容都会被替换

odiv.innerHTML="<p></p>"

那么

<div>

<ul>

<li></li>

<li></li>

<li></li>

</ul>

</div>

就会变成

<p>

</p>

4 insertAdjacentHTML() 该方法接收两个参数，第一个参数为下列四个之一，第二个参数为一段字符串或html代码

beforeBegin 插入该元素的前面，和该元素为兄弟元素

afertBegin 插入到该元素的子元素中的第一个位置

beforeEnd 插入到该元素中子元素的最后一个位置

afterEnd 插入到该元素的后面，与该元素为兄弟元素

element.insertAdjacentHTML("beforeBegin","<p></p>)";

5 contains()方法

父元素.contains(子元素) 返回Boolen值，用于判断某个元素是否为另外一个元素的父元素或者子元素

6 contentDocument

该属性专门用于操做框架或者内联框架

假设iframe为某一个框架或者内联框架用querySelector等方法获取到的对象

iframe.contentDocument就对应该框架的文档对象即document对象，从而能够进行后续的操做。