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

 

posted @ 2016-09-21 16:21  shenlong77  阅读(142)  评论(0编辑  收藏  举报