JavaScript进行DOM操作

作者：Kinglong 发表时间：2023-07-15 10:47

关键词：

JavaScript通过用于操作DOM对象，来实现对页面的控制。

1. Dom简介

Dom描述的是window的子对象document，指网页页面部分。

DOM= Document Object Model，文档对象模型，可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。这是表示和处理一个HTML或XML文档的常用方法。

Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强，也提升了用户的体验。

Dom之于Js，是平台、类库、对象之于语言，就像.NetFrameWork之于C#语言一样。

实际上，Dom还支持其他的脚本语言如vbscript。

没有Dom，Js只能做些逻辑运算；有了Dom，就可通过Js实现面向对象（页面）编程了。

2. DOM的节点操作

HTML成员在DOM中都是一个个节点。

2.1获取子节点相关

特别对于动态生成的元素，获取子节点常使用DOM标准的childNode属性。

jQuery对象的children属性指的是一个方法，.children 只是返回一个方法，并不会执行这个方法，.children()这种写法才是会去执行这个方法，并返回方法执行结果

.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈）。参数可选，添加参数表示通过选择器进行过滤，对元素进行筛选。

.find(selector)方法是返回匹配元素集合中每个元素的后代（只要符合，不管是儿子辈，孙子辈都可以）。参数是必选的，可以为选择器、jquery对象可元素来对元素进行筛选。

//var cld = $("#" + id).children;//错误的用法，得不到预期结果

var divA = document.getElementById(id);

var childlist = divA.childNodes;//尽可能用childNodes获取子节点

var divAppText = childlist[1];

var divAppAdd = childlist[2];

2.2节点的常用属性

nodeType常用取值：1(元素)、2(属性)、3(文本)

nodeName

nodeValue

得到节点的子节点集合

<element>.Elements()

获得子节点集合：childNodes

判断节点的类型nodeType

对于元素节点，使用nodeName得到节点的名字(大写)，不用nodeValue

if(<ele>.nodeName == "SPAN") {

}

对于文本节点，使用nodeValue可以得到里面的数据，用nodeName获取不到。

利用赋值对文本节点进行修改。

2.3 快速获取子节点

除了通过childNodes得到节点集合还可以通过以下方式获得特定节点：

第一个子节点：

<父节点>.firstChild

<父节点>.childNodes[0]

最后一个子节点：

<父节点>.lastChild

<父节点>.childNodes [<父节点>.length - 1];

当前节点的下一个兄弟节点：

子节点.nextSibling

var 下一个节点 = 子节点.nextSibling;

2.4 动态创建节点

创建表格:

document.write('<table width = "30%" height = "20%" border = "1" bgcolor = "#E0E0E0" style = "border-color:black"><tr><td>11</td><td>12</td><td>13</td></tr><tr><td>21</td><td>22</td><td>23</td></tr></table>');

3.3 DOM树

window表示这个浏览器，window.document就表示这个HTML文档。

DOM将HTML文档模拟成一个对象，即一颗DOM树，借助浏览器的开发人员工具可以查看。

找根节点，画树图

凡是标签为节点

凡是文本为节点

文本穿插标签子节点

3.3.1 获取DOM树的对象

1) 按图索骥

获取页面元素：可以通过顶级对象window层级地获取到页面元素。

id就相当于winform中的name，如果定义了id，id可直接表示对象。

var v = window.f.pwd1.value;//使用不方便，依赖于文档结构

alert(v);

</script>

<body>

<div>

</div>

</form>

</body>

2) DOM提供的方法获取

document对象提供了两个方法，获取得到页面上的元素，

document.getElementById('id名');

document.getElementsByTagName('标签名');//即节点名

var p1 = document.getElementById("pwd1");

标准DOM为元素提供了两个方法，获取和设置其属性

getAttribute('属性名');

setAttribyte('属性名', 值);

var v1 = p1.getAttribute("value");//获取元素的值推荐直接使用p1.value

p1.setAttribute("value","hahaha");//设置元素的值推荐直接使用p1.value="hahaha"

得到标签数组

document.getElementsByTagName("标签名");

3.3.2 控制DOM对象的事件

1) DOM对象的事件

可理解为元素的特殊属性

var btn = document.getElementById("btn1");

btn.onclick = function(){

getChar2();

}

2) 事件的“注册”

onclick="func();"//引号引导js脚本

onclick=func; //绑定方法到onclick

onclick=function() {

alert();

}//绑定匿名方法到onclick

3) 取消事件的后续动作—取消a链接的跳转

function show2(){

alert("欢迎，我不跳转了");

return false;

}

</script>

3.3.3修改DOM对象的属性

1) 动态修改背景色，模拟开灯关灯

<head>

.bkBlack{

background-color:#000000;

}

.bkWhite{

background-color:#ffffff;

}

</style>

function showBlack(){

var ele = document.getElementsByTagName("body")[0];

ele.setAttribute("class","bkBlack");

}

function showWhite(){

var ele = document.getElementsByTagName("body")[0];

ele.setAttribute("class","bkWhite");

}

</script>

</head>

<body>

</body>

2) 动态修改图片路径

获取a标签的href作为图片路径，赋值给图片的src

<head>

<scripttype="text/javascript">

function changeImg(a_ele) {

var path = a_ele.getAttribute("href");

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

pic.setAttribute("src", "img/png-0002.png");

}

</script>

</head>

<body>

<imgid="pic"src="img/png-0001.png"/>

</body>

3) 动态修改图片路径（onload批量注册a标签事件）

对上述功能做一个扩展，ul下有很多a标签，批量的为a标签实现上述功能。

-> onload事件

->匿名方法

->获得a标签

->为每一个a标签添加事件方法

说明：只获得ul下的a标签

->先得到ul

->由ul调用getElementsByTagName方法

<head>

<scripttype="text/javascript">

function changeImg(a_ele) {

var path = a_ele.getAttribute("href");

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

pic.setAttribute("src", path);

}

window.onload = function () {

var ul = document.getElementById("list");

var alist = ul.getElementsByTagName("a");

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

alist[i].onclick = function () {

changeImg(this);

return false;

}

</script>

</head>

<body>

</ul>

</body>

4) 动态修改a标签的href属性

a标签原来链接到百度，点了“点一下”这个按钮后， a标签的链接改到博客园

<head>

<scripttype="text/javascript">

function changehref() {

var a_ele = document.getElementById("link");

a_ele.setAttribute("href", "http://www.cnblogs.com/");

}

</script>

</head>

<body>

</body>