DOM 关于dom的

Posted jinsuo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DOM 关于dom的相关的知识,希望对你有一定的参考价值。

方法:


获取元素:

getElementById()   返回带有指定ID的元素

getElementsByTagName(); 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)

getElementsByClassName(); 返回包含带有指定类名的所有元素的节点列表。

例如:

!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取元素</title>
</head>
<body>    
<p id="box">id为box的p标签</p>
<p class="box">class为box的p标签内容1</p>
<p class="box">class为box的p标签内容2</p>
<p class="box">class为box的p标签内容3</p>
</body>
<script type="text/javascript">
var obj=document.getElementById(‘box‘).innerText;
alert(obj); //弹出的内容:id为box的p标签
var objclass=document.getElementsByClassName(‘box‘)[1].innerText;
alert(objclass); //弹出的内容:class为box的p标签内容2
var objtag=document.getElementsByTagName(‘p‘);
alert(objtag.length); //弹出的内容:所有
</script>
</html>


appendChild()    把新的子节点添加到指定节点。

例子:<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom方法</title>
</head>
<body>
    
</body>
<script type="text/javascript">
    var createNode=document.createElement("div");
    var createTextNode=document.createTextNode("文本内容");
    createNode.appendChild(createTextNode);
    //document.body.appendChild(createNode);
    document.documentElement.appendChild(createNode);
//  document.body指向的是<body>元素;document.documentElement则指向<html>元素
</script>
</html>

removeChild()    删除子节点。
replaceChild()    替换子节点。
insertBefore()    在指定的子节点前面插入新的子节点。
createAttribute()    创建属性节点。
createElement()    创建元素节点。
createTextNode()    创建文本节点。
getAttribute()    返回指定的属性值。
setAttribute()    把指定属性设置或修改为指定的值。




                                                                                                                                                                                                                                       

 

以上是关于DOM 关于dom的的主要内容,如果未能解决你的问题,请参考以下文章

jQuery的DOM操作

关于CSS的个人理解

深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

JavaScript 将片段附加到DOM而不是每个节点。

将片段附加到DOM而不是每个节点。

JavaScript单行代码,也就是代码片段