Html文档对象DOM
基本概念
- 每个载入浏览器的 HTML 文档都会成为 Document 对象。
- Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
- Document 对象是 Window 对象的一部分
- 当浏览器打开一个HTML文档时，浏览器解析HTML文档的标记，并创建表示这些标记的对象，这些对象就是HTML文档对象。
- 文档对象即Document 对象，指的是一回事。
DOM常用方法
- 获取HTML文档对象的方法
- getElementById() 返回对拥有指定 id 的第一个对象的引用。
- getElementsByName() 返回带有指定名称的对象集合。
- getElementsByTagName() 返回带有指定标签名的对象集合。
- 其他方法
- write() 向文档写 HTML 表达式 或 JavaScript 代码。
- 温馨提示：文档加载之后使用docunment.write()会覆盖原文档.
```
<body>
<h4 id="bt" class="bt">学生信息</h4>
学号：<input type="text" id="number" class="number" value="111111"><br>
姓名：<input type="text" id="name" class="name" value="木木"><br>
英语：<input type="text" id="englist" class="english" name="score" value="60"><br>
数学：<input type="text" id="math" name="score" value=""><br>
<script type="text/javascript">
var BT = document.getElementById('bt');
var Score = document.getElementsByName('score');
var Input = document.getElementsByTagName('input')
document.write(BT.innerHTML+'<br>');
document.write(Score[0].value+'<br>');
document.write(Input[0].value+'<br>');
</script>
</body>
```
改变 HTML 元素的样式
在 HTML DOM 中，Element 对象表示 HTML 元素。
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
- 获取元素的内容和标签名称
- element.innerHTML 设置或返回元素的内容。
- element.tagName 返回元素的标签名。
- HTML属性的获取
- element.id 设置或返回元素的 id。
- element.className 设置或返回元素的 class 属性。
- element.title 设置或返回元素的 title 属性。
- ......
document.write(BT.id+'<br>');``BT.innerHTML="lala"
-
改变CSS样式
- 通过style属性操作内联式
需要将下划线去掉并将第二个单词首字母大写，比如：-
backgroundColor/backgroundImage/borderColormarginLeft......
Inp[0].style.background='red'
- 通过className
先在样式表里class的样式，然后通过JS修改元素class
- 通过style属性操作内联式
-
操作HTML文档对象的属性
- element.getAttribute() 返回元素节点的指定属性值。
- element.setAttribute() 把指定属性设置或更改为指定值。
- element.removeAttribute() 从元素中移除指定属性。
创建HTML文档对象
javascript中可以通过createElement()方法创建一个元素(节点)。
- createElement() 创建元素节点。
- element.appendChild() 向元素添加新的子节点，作为最后一个子节点。
- element.removeChild() 从元素中移除子节点。
var img1 = document.createElement('img');
img1.src='xx';
var div1 = document.getElementById('div1')
div1.appendChild(img1);
ul1.removeChild(li3)好像没用
DOM节点
将文档结构相像成一棵树，每一个部分（元素，属性，内容）都可以看做一个节点。
根据一个节点可以通过关系找到其他节点
- 节点的属性：(名称、类型、值)
- element.nodeName 返回元素的名称。与element.tagName作用相同
文本节点的名称为:#text;文档节点的名称为:#document.
- element.nodeType 返回元素的节点类型。
-
如果节点是元素节点，则 nodeType 属性将返回 1。 -
如果节点是属性节点，则 nodeType 属性将返回 2。 -
如果节点是文本节点，则 nodeType 属性将返回 3。
-
- element.nodeValue 设置或返回元素值。
- 文本节点的nodeValue为文本内容
- 属性节点的nodeValue为属性值
- 元素节点无nodeValue
- element.nodeName 返回元素的名称。与element.tagName作用相同
- 子元素相关(可以类别CSS中的虚拟类别选择器)
- element.parentNode 返回元素的父节点。
- element.childNodes 返回元素子节点的 NodeList。类似CSS中的子选择器
- element.children 返回元素的子元素,该属性只返回元素节点。
- element.firstChild和element.firstElementChild返回元素的首个子元素。类似CSS中的：e:first-child
- element.lastChild 和element.lastElementChild返回元素的最后一个子元素。类似CSS中的： e:last-child
function myFun1(){ alert(div1.nodeName) alert(div1.tagName) } function myFun2(){ alert(div1.nodeType) } function myFun3(){ alert(div1.nodeValue) alert(input1.nodeValue) } function myFun4(){ var ff=div1.parentNode.nodeName alert(ff) } function myFun5(){ var ch=div1.childNodes alert(ch[2].nodeValue) } - 同级兄弟元素相关(可以类别CSS中的兄弟选择器)
- element.previousSibling element.previousElementSibling 返回位于相同节点树层级的前一个元素。
- element.nextSibling element.nextElementSibling 返回位于相同节点树层级的下一个节点。类似CSS中的直接相邻选择器: h1+h2
- 属性节点
- element.attributes 返回元素属性的 NamedNodeMap。
- element.insertBefore() 在指定的已有的子节点之前插入新节点。
- element.replaceChild() 替换元素中的子节点。
- .......
function myFun1(){
ul1.firstElementChild.style.background='red'
ul1.lastElementChild.style.background='green'
}
function myFun2(){
// ul1.firstElementChild.nextElementSibling.style.background='red'
// ul1.lastElementChild.previousElementSibling.style.background='green'
if(ul1.firstElementChild){
ul1.firstElementChild.nextElementSibling.style.background='red'
}else{
ul1.firstChild.nextSibling.style.background='red'
}
}
function myFun3(){
alert(input1.attributes[0].nodeName)
alert(input1.attributes[1].nodeName)
alert(input1.attributes[2].nodeName)
}
function myFun4(){
var li5=document.createElement('li')
li5.innerHTML="列表元素insert"
ul1.insertBefore(li5,ul1.children[1])
}
function myFun5(){
var li5=document.createElement('li')
li5.innerHTML="列表元素insert"
ul1.replaceChild(li5,ul1.children[1])
}
练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
div{
margin: 15px auto;
background: orange;
width: 300px;
height: 240px;
text-align: center;
padding: 15px;
}
input{
margin: 10px 10px;
padding: 5px;
}
</style>
</head>
<body>
<div>
<h3>计算圆的面积</h3>
<label for="radius">半径:</label>
<input type="text" id="radius" ><br>
<label for="area">面积:</label>
<input type="text" id="area" ><br><br>
<input type="button" id="js" value="计算" onclick="show()">
<input type="button" id="cl" value="清空" onclick="cl()">
</div>
<script type="text/javascript">
function area(r) {
return Math.PI*r*r;
}
function show() {
var radius = document.getElementById('radius').value;
document.getElementById('area').value = area(radius)
}
function cl() {
document.getElementById('radius').value = '';
document.getElementById('area').value = '';
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
img{
border-style: groove;
border-width: 5px;
border-color: orange;
display:none;
}
input[type='button']{
width: 60px;
height: 60px;
border-radius: 30px;
outline: none;
}
</style>
</head>
<body>
<input type="text" id="imgUrl" value=""> <br>
<input type="button" value="播放" onclick="autoPlay()">
<input type="button" value="添加图片" onclick="addImage()"><br>
<img src="" alt="" height="300" id="img"><br>
<script type="text/javascript">
var imgArray = new Array();
var index = 0;
function autoPlay() {
var imgObj = document.getElementById('img');
imgObj.style.display = 'inline';
if (imgArray.length <= 0) {
imgObj.setAttribute('alt','木有图片');
}else {
index = (index+1)%imgArray.length;
var imgId = imgArray[index];
imgObj.setAttribute('src',imgId);
}
setTimeout('autoPlay()',1000);
}
function addImage(){
var imgUrl=document.getElementById('imgUrl').value;
imageArr.push(imgUrl)
}
</script>
</body>
</html>
