JavaScript第十三讲：DOM的应用操作-优快云博客

本文链接：https://blog.youkuaiyun.com/phpzt/article/details/106483768

这篇博客详细介绍了JavaScript中DOM（Document Object Model）的应用操作，包括如何将文档转换为JS对象、操作属性、内容和样式，以及如何通过不同方式获取对象。通过实例展示了如何使用JavaScript改变元素的链接、样式、类名等，并探讨了BOM（Browser Object Model）的相关知识，以及在不同浏览器间实现兼容的技巧。此外，还涵盖了如何动态创建、添加、删除和插入HTML元素，以及遍历和操作节点的方法。

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

DOM操作（上）

一.DOM

作用：DOM（Document Object Nodel）

1.document 文档 HTML文件 XML文件（标记语言）

<body>

<div>

<a>ssssss</a>

</div>

</body>

2.Object 对象（HTML元素转成的js对象）

注意：如果使用js操作HTML或XML文档，就需要先将HTML文档结构转成js对象

a、操作属性

b、操作内容

innerText内部的文本(IE能用)（非IE用textContent）

innerHTML

outerText

outerHTML外标签

表单 ----value

c、操作样式

单个操作

aobj.style.backgroundColor="red";

aobj.style.fontSize="3cm";

批量操作

className

aobj.className="test";

aobj.className+=" demo";

//aobj.className="test demo";

aobj.className="";//清除类

有了以上三点的操作之前先转成对象

转成对象的两种方式

A、标记名（li、a、ul等等 ---多个）、id名（唯一）、name（多个）、class

document中的三个方法

var objs=document.getElementsByTagName("div");

var objs=document.getElementById("one");

var objs=document.getElementsByName("two");

B、用数组获取对象

document.title=

document.body=[object]

window.frames=[object]

document.all=[object]

document.embeds=[object]//所有动画

document.scripts=[object] //所有脚本

document.applets=[object]//

document.images=[object]

document.forms=[object]

document.anchors=[object]//所有锚点<a>中带name的

document.styleSheets=[object]

document.links=[object]

有七种方式

alert(document.forms[1].username.value);//结果为lisi

alert(document.forms["frm2"].username.value);

alert(document.forms.item(1).username.value);

alert(document.forms.item("frm2").username.value);

alert(document.forms.frm2.username.value);

alert(document.frm2.username.value);

alert(document["frm2"].username.value);

例1

<html>

<head>

<style>

#alink{

width:400px

}

.test{

width:500px;

height:300px;

border:5px solid blue;

color:red;

font-size:4cm

background:yellow;

}

.demo{

width:500px;

height:300px;

}

</style>

</head>

<body>

<textarea id="content">mmmmmmm</textarea><br>

var aobj=document.getElementById("alink");//把文档变成对象

aobj.href="www.baidu.com"; //操作属性

aobj.target="_self";

aobj.title="demo demo demo";

aobj.innerText="brother";//内部的文本

aobj.innerHTML="<b>brother</b>"//结果加粗了

aobj.style.backgroundColor="red";//"-"去掉，首字母大写

aobj.style.fontSize="3cm";

aobj.className="text demo"

alert(aobj.offsetWidth);//输出400，如果style写在内部了就可以直接用aobj.width获取其值了。

alert(aobj.outerHTML);//输出结果是:包含<a>标签的所有东西

var username=document.getElementById("username");

var content=document.getElementById("content");

alert(username.value);//得到zhangsan

alert(content.value);//textarea同样用value获取其值，因为它也是表单里的一项。

</script>

</body>

</html>

二.BOM

小知识

判断IE还是火狐的方法

if(document.all){

alert("IE");

}else{

alert("huohu");

}

例2.解决IE和火狐之间的这块兼容问题

function file(obj,value){

if(document.all){

if(typeof(value)=="undefined")

return obj.innerText;

else

obj.innerText=value;

}else{

if(typeof(value)=="undefined")

return obj.textContent;

else

obj.textContent=value;

}

</script>

DOM操作（中）

例1

<html>

<body>

document.write("<ul>");

for(var i=0;i<20;i++){

document.write("<li>");

document.write('<input type="checkbox" name="ids[]" value="+i+">aaaaaaaa');

document.write("</li>");

}

document.write("</ul>")

</script>

var cnames=document.getElementsByName("ids[]");

function sall(){

for(var i=0;i<cnames.length;i++)

cnames[i].checked="true";

}

function fall(){

for( var i=0;i<cnames.length;i++)

if(cnames[i].checked)

cnames[i].checked="";

else

cnames[i].checked=true;

}

function nall(){

for(var i=0;i<cnames.length;i++)

cnames[i].checked="";

}

</script>

</body>

</html>

例2

<html>

<body>

document.write("<ul>");

for(var i=0;i<20;i++){

document.write("<li>");

document.write('<input type="checkbox" name="ids[]" value="+i+">aaaaaaaa');

document.write("</li>");

}

document.write("</ul>")

</script>

//将checkbox和全选连在一起了。

var cnames=document.getElementsByName("ids[]");

function sall(obj){

if(obj.checked)

for(var i=0;i<cnames.length;i++)

cnames[i].checked=obj.checked;

}

</script>

</body>

</html>

例3

<html>

<head>

</head>

<body>

var name=document.getElementsByName("username")[0];

alert(name[0].value);//zhangsan

</script>

</body>

</html>

例4选项卡

<html>

<head>

<style>

#card{

width:300px;

height:200px;

}

#tit{

width:100%;

height:25px;

line-height:25px;

}

#tit h3{

margin:0px;

padding:0px;

width:80px;

background:#ccc;

float:left;

line-height:25px;

text-align:center;

border:2px solid white;

font-size:12px;

color:white;

}

#content{

width:100%;

height:175;

background:#888;

color:white

}

#content div{

display:none

}

#content .one{

display:block;

}

#tit .titin{

border:2px solid #888;

background:#888;

}

</style>

</head>

<body>

</div>

<ul>

<li>aaaaaaaa</li>

</ul>

< /div>

<div>

<ul>

<li>bbbbbb</li>

</ul>

</div>

<div>

<ul>

<li>ccccccc</li>

</ul>

</div>

var h3os=document.getElementsByTagName("h3");

var cdivs=document.getElementById("content").getElementsByTagName("div");

function show(num){

for(var i=0;i<h3os.length;i++){

if(i==num){

h3os[num].className="titin";

cdivs[num].style.display="block";

}else{

h3os[i].className="";

cdivs[i].style.display="none";

}

</script>

</body>

</html>

例5、用数组获取对象

</form>

</form>

</form>

alert(document.forms[1].username.value);//结果为lisi

alert(document.forms["frm2"].username.value);

alert(document.forms.item(1).username.value);

alert(document.forms.item("frm2").username.value);

alert(document.forms.frm2.username.value);

alert(document.frm2.username.value);

alert(document["frm2"].username.value);

</script>

DOM的应用（下）

DOM

D---document

O---Object

M---model

一、将文档想成一个倒树，每一个部分（元素、内容、属性、注释）都是一个节点

二、只要知道一个节点，按照关系找到其他节点。

父节点 parentNode

子节点（第一个、最后一个） childNodes firstChild lastChild

同胞节点（上一个、下一个） nextSibling previousSibling

可以对节点进行增删改查

三、找到节点，节点类型nodeType，节点名nodeName，节点值nodeValue

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

nodeName（节点名称）

nodeValue（节点值）

nodeType（节点类型）

nodeName属性含有节点的名称

元素节点的nodeName是标签名称

属性节点的nodeName是属性名称

文本节点的nodeName永远是#text

文档节点的nodeName永远是#document

注释：nodeName所包含的XML元素的标签名称永远是大写的

对于文本节点，nodeValue属性包含文本

对于属性节点，nodeValue属性包含属性值

nodeValue属性对于文档节点和元素节点是不可用的

nodeType属性可返回节点的类型

最重要的节点类型是：

元素类型节点类型

元素 1

属性 2

文本 3

注释 8

文档 9

可以在一个文档流中

1.创建节点

在文档流中创建所以在document中的方法。document.creatElement("")//创建元素

2.添加到文档流

appendChild();

insertBefore();

3.删除节点

removeChild();

例1.

<html>

<body>

<div>

<b></b>

<a>aaaaaa</a>

<span>wwwww</span>

</p>

</div>

var pobj=document.getElementByid("pp");

alert(pobj.parentNode.nodeName);//找父节点的名

alert(pobj.childNodes.length);

alert(pobj.childNodes[0].nodeName);

alert(pobj.lastchild.nodeName);

alert(pobj.nextSibling.nodeName);

alert(pobj.nextSlbling.nextSibling.nodeName);

alert(pobj.previousSibling.previousSibling.nodeName);

</script>

</body>

</html>

例2.

<body>

aaaaaaaaaaaaaaaaa<br>

function test(){

document.write("##############");

document.close();

document.write("##############");

}

test();

</script>

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>

</body>

例3//在谁之后；在谁和谁之间

<body>

aaaaaaaaaaaaaaaaa<br>

<b>ssdfsdfsdfsdf</b><br>

<p id="two">dddddd</p>

</div>

var one=document.getElementById("one");

var pobj=document.getElementById("two");

function test(){

var tu=document.createElement("img");

tu.src="php.gif";

tu.alt="this is demo";

tu.border=0;//去图的边框

var aobj=document.creatElement("a");

aobj.href="http://www.baidu.com";

aobj.target="_blank";

aobj.title="this is test";

// aobj.innerText="百度";

aobj.appendChild(tu);

document.body.appendChild(aobj);//在body后追加追加子节点

one.appendChild(aobj);//在div id=“one”中追加一个aobj样式的子节点

one.insertBefore(aobj,pobj)//将节点aobj插入到pobj之前。

}

</script>

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>

</body>

例5//在p标签之后插入

<body>

aaaaaaaaaaaaaaaaa<br>

<b>ssdfsdfsdfsdf</b><br>

<p id="two">dddddd</p>

<b>wwwww</b>

</div>

var one=document.getElementById("one");

var pobj=document.getElementById("two");

function test(){

var tu=document.createElement("img");

tu.src="php.gif";

tu.alt="this is demo";

tu.border=0;//去图的边框

var aobj=document.creatElement("a");

aobj.href="http://www.baidu.com";

aobj.target="_blank";

aobj.title="this is test";

// aobj.innerText="百度";

aobj.appendChild(tu);

document.body.appendChild(aobj);//在body后追加追加子节点

one.appendChild(aobj);//在div id=“one”中追加一个aobj样式的子节点

one.insertBefore(aobj,pobj)//将节点aobj插入到pobj之前。

// one.inserBefore(aobj,pobj.nextSibling)

insertAfter(pobj,aobj)

}

function insertAfter(obj,newobj){

if(obj.nextSibling.nodeType==1){

one.insertBefore(newobj,obj.nextSibling);

}else{

one.appendChild(newobj);

}

</script>

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>

</body>

例6、 //删除节点

<body>

aaaaaaaaaaaaaaaaa<br>

<b>ssdfsdfsdfsdf</b><br>

<p id="two">dddddd</p>

<b>wwwww</b>

</div>

var one=document.getElementById("one");

var pobj=document.getElementById("two");

function test(){

var tu=document.createElement("img");

tu.src="php.gif";

tu.alt="this is demo";

tu.border=0;//去图的边框

var aobj=document.creatElement("a");

aobj.href="http://www.baidu.com";

aobj.target="_blank";

aobj.title="this is test";

// aobj.innerText="百度";

aobj.appendChild(tu);

document.body.appendChild(aobj);//在body后追加追加子节点

one.appendChild(aobj);//在div id=“one”中追加一个aobj样式的子节点

one.insertBefore(aobj,pobj)//将节点aobj插入到pobj之前。

// one.inserBefore(aobj,pobj.nextSibling)

insertAfter(pobj,aobj)

}

function insertAfter(obj,newobj){

if(obj.nextSibling.nodeType==1){

one.insertBefore(newobj,obj.nextSibling);

}else{

one.appendChild(newobj);

}

function del(){

one.removeChild(one.lastChild);

}

</script>

bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb<br>

</body>