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