HTML DOM Element 对象-优快云博客

本文详细介绍了DOM（Document Object Model）的各种操作方法，包括节点的创建、添加、克隆、查询、属性的读取与修改等。通过实例展示了如何使用JavaScript操纵网页元素，实现动态网页效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

变量名不能加“引号”

Node //节点

appendChild() //向元素添加新的子节点，作为最后一个子节点。

<ul id="mylist">
	<li>car</li>
	<li>dog</li>
</ul>
<input type="button" onclick="myfunction()" value="确定" />

//添加节点 成为最后一个节点
function myfunction(){
	//首先创建 LI 节点
	var node=document.createElement("LI");
	//然后创建文本节点
	var textnode=document.createTextNode("tuzi");
	//然后把这个文本节点追加到 LI 节点
	node.appendChild(textnode);
	//最后把 LI 节点添加到列表中。
	document.getElementById("mylist").appendChild(node);
}

class Name //设置或返回元素的 class 属性。

语法:HTMLElementObject.className=classname

cloneNode() //克隆元素

例：把一个列表项从一个列表复制到另一个：
var node=document.getElementById("myList2").lastChild.cloneNode(true);
document.getElementById("myList1").appendChild(node);
定义和用法：
cloneNode() 方法创建节点的拷贝，并返回该副本。
cloneNode() 方法克隆所有属性以及它们的值。

firstChild() //返回元素的首个子。

语法：node.firstChild
例：
<p id="demo1">是什么</p>
<input type="button" value="你点" onclick="fun()" />

function fun(){
    var x=document.getElementById("demo1");
    x.innerHTML=document.firstChild.nodeName;
}

getAttribute() //返回指定属性名的属性值。

语法:element.getAttribute(attributename)
定义和用法:getAttribute() 方法返回指定属性名的属性值。
例：
<a href="/jsref/dom_obj_attributes.asp" target="_blank">Attr 对象</a>，

<p id="demo">请点击按钮来显示上面这个链接的 target 属性值。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var a=document.getElementsByTagName("a")[0];
document.getElementById("demo").innerHTML=a.getAttribute("target");
}
</script>

hasAttribute() //如果元素拥有指定属性，则返回true，否则返回 false。

<body class="s">
<p id="demo">请点击按钮来查看 body 元素是否拥有属性。</p>
<button onclick="myFunction()">试一下</button>

function myFunction(){
var x=document.getElementById("demo");
x.innerHTML=document.body.hasAttributes();
}
//结果是 true

element.innerHTML //设置或返回元素的内容。

<a id="myAnchor" href="http://www.microsoft.com">Microsoft</a>
<input type="button" onclick="changeLink()" value="Change link">

 function changeLink()
 {
 document.getElementById('myAnchor').innerHTML="W3Schools";
 document.getElementById('myAnchor').href="http://www.w3schools.com";
 document.getElementById('myAnchor').target="_blank";
 }

element.insertBefore() //在指定的已有的子节点之前插入新节点

首先请创建一个 LI 节点，
然后创建一个文本节点，
然后向这个 LI 节点追加文本节点。
最后在列表中的首个子节点之前插入此 LI 节点。
<ul id="myList"><li>Coffee</li><li>Tea</li></ul>
<p id="demo">请点击按钮向列表插入一个项目。</p>
<button onclick="myFunction()">试一下</button>

function myFunction(){
     var newItem=document.createElement("li");
     var textnode=document.createTextNode("weater");
     newTtem.appendChild(textnode);
     var list=document.getElementById("myList");
     list.insertBefore(nweItem,list.childNodes[0]);
}

isEqualNode() //判断是否有相同的节点如果有返回true 否则false

关于列表的先获取列表id 在获取别的id

element.lastChild //返回元素的最后一个子元素

语法：node.lastChild

element.nextSibling //返回位于相同节点树层级的下一个节点

语法：node.nextSibling

element.nodeName //返回元素名称


定义和用法：
nodeName 属性指定节点的节点名称。
如果节点是元素节点，则 nodeName 属性返回标签名。
入股节点是属性节点，则 nodeName 属性返回属性的名称。
对于其他节点类型，nodeName 属性返回不同节点类型的不同名称。

语法：node.nodeName

element.nodevalue //设置或返回元素值

element.normalize() //合并元素中相邻的文本节点并移除空的节点

<p id="demo">点击按钮添加文本，点击另一个按钮来正规化元素。</p>
<button onclick="addTextNode()">添加文本节点</button>
<button onclick="normPara()">对段落进行正规化</button>

function addTextNode()
{
var y=document.createTextNode("请再次点击。");
var x=document.getElementById("demo");
x.appendChild(y);
var z=document.getElementById("cc");
z.innerHTML=x.childNodes.length;
}

function normPara()
{
var x=document.getElementById("demo");  
x.normalize();
var z=document.getElementById("cc");
z.innerHTML=x.childNodes.length;
}

element.parentNode //返回元素的父节点

<p>列表示例：</p>
<ul><li>Coffee</li><li>Tea</li></ul>
<p id="demo">点击按钮来获得列表中首个列表项的父节点节点名。</p>

function myFunction()
{
var x=document.getElementById("demo");  
var y=document.getElementsByTagName("LI")[0];
x.innerHTML=y.parentNode.nodeName;
}

elemen.removeAttributeNode() //移除指定的属性节点，并返回被移除的节点。

<h1 style="color:red">Hello World</h1>
<p id="demo">点击按钮来删除标题中的 style 属性。</p>
<button onclick="myFunction()">试一下</button>

function myFunction()
{
document.getElementsByTagName("H1")[0].removeAttribute("style"); 
}

removeChild() //从元素中移除子节点。

<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<p id="demo">点击按钮来删除列表中的首个项目。</p>
<button onclick="myFunction()">试一下</button>

function myFunction()
{
var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);
}

replaceChild() //替换元素中的子节点

<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<p id="demo">点击按钮来替换列表中的首个项目。</p>
<button onclick="myFunction()">试一下</button>

function myFunction()
{
var textnode=document.createTextNode("Water");
var item=document.getElementById("myList").childNodes[0];
item.replaceChild(textnode,item.childNodes[0]);
}

setAttribute() //把指定属性设置或更改为指定值

<input value="OK">
<p id="demo">点击按钮来设置按钮的 type 属性。</p>
<button onclick="myFunction()">试一下</button>


function myFunction()
{
document.getElementsByTagName("INPUT")[0].setAttribute("type","button"); 
}

setAttributeNode() //设置或更改指定属性节点

<style type="text/css">
.democlass{color:red;}
</style>

<h1>Hello World</h1>
<p id="demo">点击按钮来设置上面这个标题的 class 属性节点。</p>
<button onclick="myFunction()">试一下</button>

function myFunction()
{
var atr=document.createAttribute("class");
atr.nodeValue="democlass";
var h=document.getElementsByTagName("H1")[0];
h.setAttributeNode(atr); 
}

element.style //设置或返回元素的 style 属性。

tagName //返回元素的标签名

<p id="demo">点击按钮来显示此元素的标签名。</p>
<button onclick="myFunction()">试一下</button>

function myFunction()
{
var x=document.getElementById("demo");
x.innerHTML=x.tagName;
}

转载于:https://my.oschina.net/xiaojunx/blog/710585