首页 > 代码库 > DOM 关于dom的

DOM 关于dom的

2024-09-17 09:03:36   218人阅读

方法：


获取元素：

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的


联系
我们