1. 快速认识DOM
<!DOCTYPE html>
<html>
<head>
<title>DOM</title>
</head>
<body>
DOM: document object model 文档对象模型
js中对象分为三种:
1. 用户定义对象
2. 内建对象 array date math
3. 宿主对象 window
将dom看做一颗树.
dom把文档看作一颗家谱树.
在html中, 标签就是dom对象, 这些dom对象又构成了家谱树(节点树).
</body>
</html>
2. DOM中节点分类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02 节点</title>
</head>
<body>
<p title="我是mjj" class="" id="">mjj</p>
<ul>
<li></li>
</ul>
<!-- 节点 node-->
<!-- 1.元素节点(element node) 2.文本节点 (text node) 3.属性节点 (attribue node)-->
<!-- 没有内容 的文档是没有任何价值的，而大多数内容都是有文本提供-->
</body>
</html>
3. 获取元素节点对象的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class list</title>
</head>
<body>
<h2>你要买什么课程？</h2>
<p title='请您选择购买的课程'>本课程是web全栈课程，期待你的购买！</p>
<ul id='classList'>
<li class='item'>JavaScript</li>
<li class='item'>css</li>
<li>DOM</li>
</ul>
<!-- 节点类型：
1.元素节点
2.属性节点
3.文本节点
-->
<script type="text/javascript">
// 1.document.getElementById() 单个对象
var eleNode = document.getElementById('classList');
console.log(eleNode);
console.log(typeof eleNode);
// 2.document.getElementsByTagName() 获取出来的是一个节点对象集合 有点像数组 push()
var olis = document.getElementsByTagName('li');
var oTitle = document.getElementsByTagName('h2');
console.log(oTitle[0]);
console.log(olis.length);
for(var i = 0; i < olis.length; i ++){
console.log(olis[i]);
}
console.log(typeof olis);
// 3.document.getElementsByClassName('item');获取出来的是一个节点对象集合
var oItems = document.getElementsByClassName('item');
console.log(oItems);
</script>
</body>
</html>
4. setAttribute()和getAttribute()用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class list</title>
<style type="text/css">
#box{
color: red;
}
</style>
</head>
<body>
<h2>你要买什么课程？</h2>
<p title='请您选择购买的课程'>本课程是web全栈课程，期待你的购买！</p>
<ul id='classList'>
<li class='item'>JavaScript</li>
<li class='item'>css</li>
<li>DOM</li>
</ul>
<!--
-->
<script type="text/javascript">
var oP = document.getElementsByTagName('p')[0];
// 获取属性值 有一个必需的参数，这个节点对象的名字
var title = oP.getAttribute('title');
var className = oP.getAttribute('class');
console.log(title);
console.log(className);
// 设置属性值 setAttribute(name,value)
oP.setAttribute('id', 'box');
// 通过js设置的属性并不会反映在源码中
</script>
</body>
</html>
5. 节点对象的三个属性介绍
1. nodeName: 节点的名称
2. nodeValue: 节点的值
3. nodeType: 节点的类型
1. nodeName属性: 节点的名称, 只读
1. 元素节点的nodeName与标签名相同
2. 属性节点的nodeName与属性的名称相同
3. 文本节点的nodeName永远是 #text
4. 注释节点的nodeName永远是 #comment
5. 文档节点的nodeName永远是#document
2. nodeValue属性: 节点的值
1. 元素节点的nodeValue是undefined或null
2. 文本节点的nodeValue是文本自身
3. 属性节点的nodeValue是属性的值
3. nodeType属性: 节点的类型, 只读(浏览器不同, 值可能不同)
以下常用的几种节点类型:
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点属性</title>
</head>
<body>
<!-- nodeName nodeValue nodeType -->
<div id="box" title="我是文本">我是一个文本节点<!--我是注释--></div>
<script type="text/javascript">
// 1.元素节点
var oDiv = document.getElementById('box');
console.log(oDiv.nodeName + "| " + oDiv.nodeValue + "| " +
oDiv.nodeType);
// 2.获取属性节点
var attrNode = oDiv.attributes[0];
console.log(attrNode.nodeName + "| " + attrNode.nodeValue + "| " +
attrNode.nodeType);
// 3.获取文本节点
var textNode = oDiv.childNodes[0];
console.log(textNode.nodeName + "| " + textNode.nodeValue + "| " +
textNode.nodeType);
// 4.获取注释节点
var commentNode = oDiv.childNodes[1];
console.log(commentNode.nodeName + "| " + commentNode.nodeValue + "| " +
commentNode.nodeType);
console.log(document.nodeType);
</script>
</body>
</html>
6. 节点对象的常用属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点对象的其它常用属性</title>
</head>
<body>
<div class="previous">我是上个兄弟</div>
<div id="father">
<p>mjj</p>
<p>mjj2</p>
</div>
<div class="sibling">我是下个兄弟</div>
<script type="text/javascript">
var oFather = document.getElementById('father');
console.log(oFather.childNodes);
// 在chrome浏览器上会获取到text和p, 其中text指空格,在IE浏览器上只能获取到p.
// console.log(oFather.childNodes[0]);
// console.log(oFather.firstChild);
// console.log(oFather.childNodes[oFather.childNodes.length - 1]);
// console.log(oFather.lastChild);
// console.log(oFather.parentNode.parentNode);
console.log(oFather.nextSibling);
// console.log(oFather.previousSibling);
// 节点对象属性在各浏览器兼容性处理
function get_childNodes(fatherNode){
var nodes = fatherNode.childNodes;
var arr = [];//保存已经获取的元素节点对象
for(var i = 0; i < nodes.length; i++){
if (nodes[i].nodeType === 1) {
arr.push(nodes[i]);
}
}
return arr;
}
var childnodes = get_childNodes(oFather);
console.log(childnodes[0]);
function get_nextSibling(n){
var x = n.nextSibling;
while(x && x.nodeType != 1){
x = x.nextSibling;
}
return x;
}
console.log(get_nextSibling(oFather));
</script>
</body>
</html>
7. 元素节点对象的增删改查方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07 节点方法</title>
<style type="text/css">
.active{
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div id="box">
<p id="active">mjj</p>
</div>
<!--
动态的操作节点
1.创建节点 createElement()
2.插入节点 appendChild()
insertBefore(newNode,node)
3.删除节点 removeChild(childNode)
4.替换节点 replaceChild(newNode,node)
5.创建文本节点 createTextNode()
-->
<script type="text/javascript">
var oDiv = document.getElementById('box');
var oAtive = document.getElementById('active');
var newNode = document.createElement('p');
var newNode2 = document.createElement('p');
var newNode3 = document.createElement('a');
console.log(newNode === newNode2);// 两个节点不同
newNode.innerHTML = '<a href="#">alex@qq.com</a>'; //渲染标签, 并插入文本
newNode2.innerHTML = '<a href="#">mjj@qq.com</a>';
newNode3.setAttribute('href','http://www.baidu.com');
newNode3.innerHTML = '百度一下';
newNode.setAttribute('class', 'active');
oDiv.appendChild(newNode);
// 第一个参数是新插入的节点，第二个参数是参考的节点
oDiv.insertBefore(newNode2,oAtive);
/*
var textNode = document.createTextNode('alex');
newNode.appendChild(textNode);
*/
// newNode = null;//释放对象, 从内存中释放掉,放在最后
// oDiv.removeChild(oAtive); 删除操作
oDiv.replaceChild(newNode3, oAtive)
// newNode.innerText = '<a href="#">alex@qq.com</a>'; 无法渲染标签, 只是字符串
</script>
</body>
</html>
8. 样式设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态操作样式</title>
<style type="text/css">
.highLight{
background-color: black;
color: white;
width: 250px;
height: 250px;
line-height: 250px;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<p id='box'>MJJ</p>
<script type="text/javascript">
// nodeObj.style
var para = document.getElementById('box');
/*
1、直接操作样式属性
console.log(para.style); //获取所有属性, 属性都采用驼峰体
para.style.color = 'white';
para.style.backgroundColor = 'black';
para.style.width = '250px';
para.style.height = '250px';
para.style.textAlign = 'center';
para.style.lineHeight = '250px';
para.style.fontSize = '30px';
// 通过这种方式设置的每个属性都设置成了行内样式style = 'color:red;'
*/
// 2、通过控制属性的类名来控制样式(推荐使用这种方式)
para.setAttribute('class', 'highLight');
</script>
</body>
</html>
9. 常用事件
常用事件
onclick 鼠标单击事件
onmouseover 鼠标经过事件
onmouseout 鼠标移开事件
onchange 文本框内容改变事件(常用于表单事件)
onselect 文本框内容被选中事件(常用于表单事件, 如选中下拉菜单中选项)
onfocus 光标聚焦事件(常用于表单事件, input输入框中插入光标)
onblur 光标失焦事件(常用于表单事件)
onload 网页加载事件
10. onclick事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<!-- <div id="box" onclick="add();"></div> -->
<div id="box" ></div>
<script type="text/javascript">
var oDiv = document.getElementById('box');
var isBlue = true;
// 方式1: 匿名函数
oDiv.onclick = function(){
if (isBlue) {
// this 指向了当前的元素节点对象
this.style.backgroundColor = 'red';
isBlue = false;
}else{
this.style.backgroundColor = 'blue';
isBlue = true;
}
};
// 方式2: 声明一个函数, 将函数名赋值给事件(推荐使用这种方式)
/* var add = function(){
alert(1111);
}
oDiv.onclick = add;*/
// 方式3: 较繁琐, 不推荐使用
/*<div id="box" onclick='add();'></div>
function add(){
alert(1111);
}*/
</script>
</body>
</html>
11. 鼠标悬浮事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onmouseover()和onmouseout()事件</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="box">
</div>
<script type="text/javascript">
// 1.找开关 2.摁一下 3.灯亮了
// 1.找到触发的事件对象
var oDiv = document.getElementById('box');
// 2.鼠标滑过事件
oDiv.onmouseover = function(){
console.log(111);
// 3.事件处理程序
this.style.backgroundColor = 'green';
}
// 2.鼠标移开事件
oDiv.onmouseout = function(){
// 3.事件处理程序
this.style.backgroundColor = 'red';
}
</script>
</body>
</html>
12. 光标聚焦和失焦事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>光标聚焦和失焦事件</title>
<style type="text/css">
.text{
color: red;
font-size: 12px;
}
</style>
</head>
<body>
<form action="">
<p class="name">
<label for="username">用户名：</label>
<input type="text" name="user" id="username">
</p>
<p class="pwd">
<label for="pwd">密码：</label>
<input type="password" name="wpd" id="pwd">
</p>
<input type="submit" name="">
</form>
<script type="text/javascript">
var userName = document.getElementById('username');
var newNode = document.createElement('span');
userName.onfocus = function(){
newNode.innerHTML = '请输入用户名';
newNode.setAttribute('class', 'text')
userName.parentNode.appendChild(newNode);
}
userName.onblur = function(){
newNode.innerHTML = '请输入正确的用户名';
newNode.setAttribute('class', 'text')
userName.parentNode.appendChild(newNode);
}
</script>
</body>
</html>
13. 表单控件上内容选中和改变事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容选中事件和内容改变事件</title>
</head>
<body>
<!-- onselect onchange -->
<textarea cols="30" rows="10">请写入个人简介，字数不少于200字</textarea>
<input type="text" name="" value="mjj">
<script type="text/javascript">
var textArea = document.getElementsByTagName('textarea')[0];
var inputObj = document.getElementsByTagName('input')[0];
textArea.onselect = function(){
console.log('内容被选中');
}
inputObj.onchange = function(){
console.log('内容被改变了');
}
/*
inputObj.oninput = function(){
console.log('内容被实时改变了');
console.log(this.value);
}
*/
</script>
</body>
</html>
14. 窗口加载事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>窗口加载事件</title>
<script type="text/javascript"> //多数写在head中,但是代码加载顺序是从左往右,从上往下
/*
setTimeout(function(){
var oDiv = document.getElementById('box');
console.log(oDiv);
oDiv.onclick = function(){
this.innerHTML = 'alex';
}
}, 0)
*/
// 等待文档元素加载完成才会调用onload(), 如果在head中写script, 则应使用window.load, 但是window.load存在事件覆盖的问题.
window.onload = function(){
var oDiv = document.getElementById('box');
console.log(oDiv);
oDiv.onclick = function(){
this.innerHTML = 'alex';
}
}
// window.onload = function(){
// console.log(11111);
// }
</script>
</head>
<body>
<div id="box">MJJ</div>
</body>
</html>
浙公网安备 33010602011771号