python 学习_第五模块 DMO
2024-05-13 07:57:31
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); // objectvar 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
python 学习_第五模块 DMO相关推荐
- python多线程编程模块不包括_python 学习_第四模块 并发编程（多线程）
python 学习_第四模块 并发编程(多线程) 一 开启线程方式 from threading importThreadimporttimedefsay(name): time.sleep(2)p ...
- python学习中文第五版_前5个学习Python的网站
python学习中文第五版 Python is a multi-utility high-level language (programming as well as a scripting lang ...
- Python学习系列（五）(文件操作及其字典)
Python学习系列(五)(文件操作及其字典) Python学习系列(四)(列表及其函数) 一.文件操作 1,读文件 在以'r'读模式打开文件以后可以调用read函数一次性将文件内容全部读出 ...
- python学习笔记（五岁以下儿童）深深浅浅的副本复印件，文件和文件夹
python学习笔记(五岁以下儿童) 深拷贝-浅拷贝 浅拷贝就是对引用的拷贝(仅仅拷贝父对象) 深拷贝就是对对象的资源拷贝 普通的复制,仅仅是添加了一个指向同一个地址空间的"标签" ...
- 5岁自学python编程-python学习笔记（五岁以下儿童）深深浅浅的副本复印件，文件和文件夹...
python学习笔记(五岁以下儿童) 深拷贝-浅拷贝 浅拷贝就是对引用的拷贝(仅仅拷贝父对象) 深拷贝就是对对象的资源拷贝 普通的复制,仅仅是添加了一个指向同一个地址空间的"标签" ...
- python学习_循环语句
python学习_循环语句 第1关:斐波那契数列 斐波那契数列(Fibonacci sequence),又称黄金分割数列. 因数学家莱昂纳多·斐波那契(Leonardoda Fibonacci)以兔子 ...
- python学习[第十五篇] 文件系统
python学习[第十五篇] 文件系统 对文件系统访问大多数都通过os模块实现. os 模块文件/目录访问函数 文件处理 mkfifo() 创建命名通道只用于linux remove(path)/un ...
- Python: 学习系列之七：模块、PIPY及Anaconda
系列 Python: 学习系列之一:Python能做什么 Python: 学习系列之二:基础介绍(int/float/string/range/list/tuple/dict/set) Python: ...
- python ui bs_Guibs的Python学习_列表
Guibs 的 Python学习_列表# 列表# 列表由一系列按特定顺序排列的元素组成, 其中元素和元素之间可以没有任何关系 # 在 Python 中, 用方括号 [] 来表示列表, 并用逗号 , 分 ...
最新文章
- PHP遍历用blade标签表示,php-Laravel Blade {{$variable或’Default Text’}}无法使用网址
- P3366 【模板】最小生成树（链式前向星，prim，有坑）难度⭐⭐
- Sitecore® 8.2 Professional Developer考试心得
- JavaScript实现fisherYates洗牌算法（附完整源码）
- java 从网络Url中下载文件
- git log友好显示
- JavaScript开发的技巧
- 啊哈java_1.桶排序——啊哈算法java实现
- vscode输入vue自动_使用vscode，新建.vue文件，tab自动生成vue代码模板
- Java的守护线程Daemon
- 图片加载完后执行事件
- javascript遍历对象的所有的属性
- zen3 服务器芯片,AMD EPYC霄龙服务器处理器亮相，Zen3架构性能飙升
- 在MFC中的socket编程
- Liang-Barsky算法思想及简单cpp实现
- 许凯拍《招摇》冻到嘴唇发紫 夸赞导演更敬业
- 所有父母害怕发生的事情，被这个男人制止了丨公益报道
- 三星发布全球首款太阳能笔记本
- 【转载】十款必备牛逼的IDEA插件
- 网上开店平台选择最关键
热门文章
- 游戏蓝牙耳机哪个牌子好？2022游戏蓝牙耳机推荐
- CSS基础学习——定位
- 优化你的jupyter notebook使用体验--自动补全+主题设置
- Python 会被取代了？什么时候？
- iphone无法开机
- 可以用c语言改笔记本键盘灯,笔记本有背光键盘重要吗？大部分没有背光键盘怎么办？...
- 【CDH】该主机与 Cloudera Manager Server 失去联系的时间过长。该主机未与 Host Monitor 建立联系。
- ajax是一种异步的请求方式,ajax异步请求的三种方式
- 用Python全面分析某化妆品企业销售情况，可视化图显示数据
- 「深入源码」Spring拦截器的实现原理和执行机制