第三章 JavaScript操作DOM对象-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_62008675/article/details/142381124

文章目录

第三章 JavaScript操作DOM对象

第三章 JavaScript操作DOM对象

1.DOM模型

W3C DOM 标准被分为 3 个不同的部分：

Core DOM - 所有文档类型的标准模型
XML DOM - XML 文档的标准模型
HTML DOM - HTML 文档的标准模型

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

2.节点和节点关系

在这里插入图片描述

3.访问节点

3.1 使用getElement系列方法访问指定节点

getElementById()、getElementsByName()、getElementsByTagName()

方法	描述
document.getElementById(id)	通过元素 id 来查找元素
document.getElementsByTagName(name)	通过标签名来查找元素
document.getElementsByClassName(name)	通过类名来查找元素

<body>
    <p id="p1" name="user"></p>
    <input name="user"></input>
    <div></div>
</body>
<script>
    var id = document.getElementById("p1");
    console.log(id); 	// <p id="p1" name="user"></p>
    var names = document.getElementsByName("user");
    console.log(names[1].tagName);	// INPUT
    var x = document.getElementsByTagName("p");
    console.log(x[0]);	 // <p id="p1" name="user"></p>
</script>

3.2 根据层次关系访问节点

节点属性：

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

element 属性：

属性名称	描述
firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

节点信息：

nodeName：节点名称
nodeValue：节点值
nodeType：节点类型

节点类型	NodeType值
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

3.3 操作节点的属性

getAttribute(“属性名”)
setAttribute(“属性名”,“属性值”)

//操作节点的属性
<body>
<h1 id="myH1" class="democlass">Element 对象</h1>
<p id="demo"></p>
<input id="input"/>
</body>
<script>
const element = document.getElementById("myH1"); 
let text = element.getAttribute("class"); 
document.getElementById("demo").innerHTML = text;
document.getElementById("input").setAttribute("type","button");
</script>

创建和插入节点

名称	描述
createElement( tagName)	创建一个标签名为tagName的新元素节点
A.appendChild( B)	把B节点追加至A节点的末尾
insertBefore( A,B )	把A节点插入到B节点之前
cloneNode(deep)	复制某个指定的节点

<div id="div1">
	<p id="p1">这是一个段落。</p>
	<p id="p2">这是另一个段落。</p>
</div>
<script>
//创建和插入节点
var para = document.createElement("p");
//创建了一个文本节点
var node = document.createTextNode("这是新的文本。");
//追加这个文本节点
para.appendChild(node);
var element1 = document.getElementById("div1");
//appendChild() 方法，追加新元素作为父的最后一个子
element1.appendChild(para);
</script>

删除和替换节点

名称	描述
removeChild( node)	删除指定的节点
replaceChild( newNode, oldNode)属性attr	用其他的节点替换指定的节点

//删除和替换节点
//remove();
const elmnt = document.getElementById("p1");
elmnt.remove();
//removeChild(child)
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
//从父元素中删除子
parent.removeChild(child);

//替换
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);

3.4 操作节点样式

改变样式的属性

style 属性

HTML元素.style.样式属性＝"值"

document.getElementById("titles").style.color="#ff0000"; 
document.getElementById("titles").style.fontSize="25px ";

名称	描述
onclick	当用户单击某个对象时调用事件
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmousedown	鼠标按钮被按下

<body>
    <h1 id="id1">我的标题 1</h1>
    <button type="button" onclick="document.getElementById('id1').style.color = 'red'">
    单击我！</button>
    <button type="button" onmouseover="document.getElementById('id1').style.color = 'yellow'">
    鼠标移入！</button>
    <button type="button" onmouseout="document.getElementById('id1').style.color = 'green'">
    鼠标移出！</button>
    <button type="button" onmousedown="document.getElementById('id1').style.color = 'pink'">
    鼠标按钮被按下!</button>
</body>

className 属性

HTML元素.className=“样式名称”

获取class属性的值

获取元素的样式

element.style.样式属性; // 获取行间样式

<head>
 <meta charset="utf-8" />
 <title>Javascript</title>
<style>
*{margin: 0;padding: 0;}
#box{width: 100px;height: 100px;margin-left: 100px;}
</style>
</head>
<body>
 <div id="box" style="background-color:#ccc;margin-top:100px;"></div>
<script>
     window.onload = function(){	
     var oBox = document.getElementById('box');
     console.log(oBox.style.width); //结果为：100px
     console.log(oBox.style.background);	//结果：rgb(204,204,204)
     console.log(oBox.style.backgroundColor); //结果：rgb(204,204,204)或#ccc
     console.log(oBox.style.margin);//结果为空
     console.log(oBox.style.marginTop);//结果：100px
     oBox.style.height = '120px';//设置样式
 }
</script>
</body>

getComputedStyle(); 获取css属性值

<head>
<meta charset="utf-8" />
<title>Javascript</title>
<style>
#box{width: 100px;height: 100px;margin-left: 100px;}
</style>
</head>
<body>
<div id="box" style="background-color:#ccc;margin-top:100px;"></div>
<script>
 window.onload = function(){	
 var oBox = document.getElementById('box');
 var a = getComputedStyle(oBox, null)['width']; // 100px
 var b = getComputedStyle(oBox, null).getPropertyValue('backgroundColor'); //chrome为null, ie为空
 var c = getComputedStyle(oBox, null)['backgroundColor'];// rgb(204,204,204)
 var d = getComputedStyle(oBox,null)['padding'];// chrome为0px, ie为空
 console.log(a, b, c, d);
}
</script>
</body>

IE 下 currentStyle 获取css 属性值

<script>
 window.onload = function(){	
 var oBox = document.getElementById('box');
 var a = oBox.currentStyle['width']; // 100px
 var b = oBox.currentStyle['background-color'];	// #ccc
 var c = oBox.currentStyle['backgroundColor'];	// #ccc
 var d = oBox.currentStyle.backgroundColor;	   // #ccc
 //var e = oBox.currentStyle.background-color;  错误
 var e = oBox.currentStyle['padding'];		// 0px
 console.log(a, b, c, d, e);
}
</script>

获取元素位置

元素属性应用：

属性	描述
offsetLeft	返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop	返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight	返回元素的高度
offsetWidth	返回元素的宽度
offsetParent	返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop	返回匹配元素的滚动条的垂直位置
scrollLeft	返回匹配元素的滚动条的水平位置
clientWidth	返回元素的可见宽度
clientHeight	返回元素的可见高度