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对象，从而可以进行后续的操作。

 

转载于:https://www.cnblogs.com/yunl/p/5893125.html