python 学习_第五模块 DMO
1. 节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02 节点
</title>
</head>
<body>
<p title="我是yy" class="" id="">yy
</p>
<ul>
<li></li>
</ul>
<!-- 节点 node-->
<!-- 1.元素节点(element node) 2.文本节点 (text node) 3.属性节点 (attribue node)-->
<!-- 没有内容 的文档是没有任何价值的，而大多数内容都是有文本提供-->
</body>
</html>
2. 获取元素节点的方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取元素节点的方式
</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); // 整个ul
console.log(typeof eleNode); // object
// 2 document.getElementsByTagName() 获取一个对象集合 有点像数组
var olis = document.getElementsByTagName('li');
console.log(olis); // HTMLCollection(3) [li.item, li.item, li]
console.log(typeof olis); // object
var oTitle = document.getElementsByTagName('h2');
console.log(oTitle); //HTMLCollection [h2]
console.log(oTitle[0]); // <h2>你要买什么课程？</h2>
for (var i = 0; i <olis.length; i++ ){
console.log(olis[i]);
}
console.log(typeof olis); //object
// 3 document.getElementsByClassName('item'); 获取出来的是一个节点对象集合
var oItems = document.getElementsByClassName('item');
console.log(oItems); //HTMLCollection(2) [li.item, li.item]
</script>
</body>
</html>
3. 获取属性和设置属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取属性和设置属性
</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]
// console.log(oP);
// 1 获取属性值 有一个必需的参数，这个节点对象的名字 getAttribute('title')
var title = oP.getAttribute('title');
console.log(title); // 请您选择购买的课程
// var className = oP.getAttribute('class');
// console.log(className);//null
// 2 设置属性值 setAttribute(name,value)
oP.setAttribute('id','box');
</script>
</body>
</html>
4 节点属性
<!DOCTYPE html>
<html>
<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); //<div id="box" title="我是文本">我是一个文本节点<!--我是注释--></div>
console.log(oDiv.nodeName + "|"+oDiv.nodeValue+"|"+oDiv.nodeType); //DIV|null|1
// 2 获取属性节点
var attrNode = oDiv.attributes[0];
// console.log(attrNode); // id='box'
console.log(attrNode.nodeName + "|"+attrNode.nodeValue+"|"+attrNode.nodeType); //id|box|2
// 3 获取文本节点
var textNode = oDiv.childNodes[0];
// console.log(textNode); // "我是一个文本节点"
console.log(textNode.nodeName + "|"+textNode.nodeValue+"|"+textNode.nodeType); //#text|我是一个文本节点|3
// 4 获取注释节点
var commentNode = oDiv.childNodes[1];
// console.log(commentNode); //<!--我是注释-->
console.log(commentNode.nodeName + "|"+commentNode.nodeValue+"|"+commentNode.nodeType); //#comment|我是注释|8
console.log(document.nodeType); //9
</script>
</body>
</html>
5 节点常用的其他属性
<!DOCTYPE html>
<html>
<head>
<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[0]); // <p>mjj</p>
console.log(oFather.childNodes[1]); // <p>mjj2</p></div>
console.log(oFather.firstChild); // <p>mjj2</p></div>
console.log(oFather.childNodes[oFather.childNodes.length - 1]);//<p>mjj2</p></div>
console.log(oFather.lastChild); // <p>mjj2</p></div>
console.log(oFather.parentNode.parentNode); // 父节点
console.log(oFather.nextSibling); //<div class="sibling">我是下个兄弟</div>
console.log(oFather.previousSibling); //<div class="previous">我是上个兄弟</div>
</script>
</body>
</html>
6 节点对象属性在各浏览器兼容性处理
<!DOCTYPE html>
<html>
<head>
<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');
// 获下面的元素节点
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); // [p, p]
// 获取上一个节点
function get_previousSibling(n){
var x = n.previousSibling;
while (x && x.nodeType != 1){
x = x.previousSibling;
}
return x;
}
console.log(get_previousSibling(oFather));
// 获取下一个节点
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>
<head>
<title>07 节点方法
</title>
<style type="text/css">
.active{
color: black;
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');
newNode.innerHTML = ' <a href="#">test@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('ssss');
newNode.appendChild(textNode);
*/
// newNode.innerHTML = 'WWWWWW';
// newNode.innerHTML = ' <a href="#">test@qq.com</a>';
// newNode.innerText = '<a href="#">test@qq.com</a>';
// oDiv.removeChild(oAtive); //删除
oDiv.replaceChild(newNode3, oAtive) // 替换
</script>
</body>
</html>
8 动态操作样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态操作样式
</title>
<style type="text/css">
.hightLight {
background-color: black;
color: white;
width: 250px;
height: 250px;
line-height: 250px;
text-align: center;
font-size: 30px;
}
</style>
</head>
<body>
<p id='box'>wer
</p>
<script type="text/javascript">
var para = document.getElementById('box');
// console.log(para.style);
/*
// 1 直接操作样式
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';
*/
// 2、通过控制属性的类名来控制样式
para.setAttribute('class','hightLight');
</script>
</body>
</html>
9 事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件
</title>
<!--
onclick 鼠标点击事件
onmouseover 鼠标经过事件
onmouseout 鼠标移开事件
onchange 文本框内容改变事件
onselect 文本框内容被选中事件
onfocus 光标聚焦事件
onblur 光标失焦事件
onload 页面加载事件
-->
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box" ></div>
<script type="text/javascript">
var oDiv = document.getElementById('box');
var isBlue = true;
oDiv.onclick = function(){
if (isBlue){
// this 指向了当前的元素节点对象
this.style.backgroundColor = 'red';
isBlue = false;
}else{
this.style.backgroundColor = 'blue';
isBlue = true;
}
}
// function add(){
// alert("wwwwwwwwwwwwwwwww");
// }
// oDiv.οnclick=add;
</script>
</body>
</html>
10 鼠标悬浮事件
<!DOCTYPE html>
<html>
<head>
<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. 找到触发的时间对象 2 事件 3 事件处理程序
var oDiv = document.getElementById('box');
// 2 鼠标滑过事件
oDiv.onmouseover = function(){
this.style.backgroundColor = 'green';
}
// 3 鼠标移开事件
oDiv.onmouseout = function(){
this.style.backgroundColor = 'red';
}
</script>
</body>
</html>
11 表单控制事件
<!DOCTYPE html>
<html>
<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="pwd" 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>
12 内容选中事件和内容改变事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内容选中事件和内容改变事件
</title>
</head>
<body>
<p title='请您选择购买的课程'>本课程是web全栈课程，期待你的购买！
</p>
<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>
13 窗口加载事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>窗口加载事件
</title>
</head>
<body>
<script type="text/javascript">
/*
setTimeout(function(){
var oDiv = document.getElementById('box');
console.log(oDiv);
oDiv.onclick = function(){
this.innerHTML = 'qqqqqqq';
}
}, 0)
*/
// 等待文档元素加载完成才会调用onload()
window.onload = function(){
var oDiv = document.getElementById('box');
console.log(oDiv);
oDiv.onclick = function(){
this.innerHTML = 'qqqqqq';
}
}
// window.onload = function(){
// console.log(11111);
// }
</script>
<div id="box">ssssss
</div>
</body>
</html>
转载于:https://www.cnblogs.com/augustyang/p/11301590.html
相关资源：JAVA上百实例源码以及开源项目
