DOM 关于dom的

获取元素:

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

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

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

例如:
   
<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>

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); //弹出的内容:所有

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

例子:

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>元素
removeChild() 删除子节点。

<div id="father">
<div id="child">A child</div>
</div>

var childnode=document.getElementById("child");
document.getElementById("father").removeChild(childnode);

insertBefore()  插入新节点;

<body>
<span id="lovespan">熊掌我所欲也!
</span>
</body>
<script
type="text/javascript">
var lovespan=document.getElementById("lovespan"); //获取id
var newspan=document.createElement("span");
var newspanref=document.body.insertBefore(newspan, lovespan);//在body里 lovespan span前面添加newspan
newspanref.innerHTML="添加前面";
</script>

 cloneNode     返回当前节点的拷贝
例子:


<ul id="box">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>

<script type="text/javascript">
var objbox=document.getElementById('box');
var objclone=objbox.cloneNode(true);
document.body.insertBefore(objclone,objbox);
</script>

createAttribute     创建新的属性


原文地址:https://www.cnblogs.com/jinsuo/p/6763719.html