文章目录
- 第三章 JavaScript操作DOM对象
- 1.DOM模型
- 2.节点和节点关系
- 3.访问节点
- 3.1 使用getElement系列方法访问指定节点
- 3.2 根据层次关系访问节点
- 3.3 操作节点的属性
- 创建和插入节点
- 删除和替换节点
- 3.4 操作节点样式
- 改变样式的属性
- 获取元素的样式
- 获取元素位置
第三章 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); // INPUTvar 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); //结果为：100pxconsole.log(oBox.style.background); //结果：rgb(204,204,204)console.log(oBox.style.backgroundColor); //结果：rgb(204,204,204)或#cccconsole.log(oBox.style.margin);//结果为空console.log(oBox.style.marginTop);//结果：100pxoBox.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']; // 100pxvar 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']; // 100pxvar b = oBox.currentStyle['background-color']; // #cccvar c = oBox.currentStyle['backgroundColor']; // #cccvar d = oBox.currentStyle.backgroundColor; // #ccc//var e = oBox.currentStyle.background-color; 错误var e = oBox.currentStyle['padding']; // 0pxconsole.log(a, b, c, d, e); } </script>
获取元素位置
元素属性应用：
| 属性 | 描述 |
|---|---|
| offsetLeft | 返回当前元素左边界到它上级元素的左边界的距离，只读属性 |
| offsetTop | 返回当前元素上边界到它上级元素的上边界的距离，只读属性 |
| offsetHeight | 返回元素的高度 |
| offsetWidth | 返回元素的宽度 |
| offsetParent | 返回元素的偏移容器，即对最近的动态定位的包含元素的引用 |
| scrollTop | 返回匹配元素的滚动条的垂直位置 |
| scrollLeft | 返回匹配元素的滚动条的水平位置 |
| clientWidth | 返回元素的可见宽度 |
| clientHeight | 返回元素的可见高度 |
