Python之路Day16前端知识篇之DomJQuery
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Python之路Day16前端知识篇之DomJQuery相关的知识，希望对你有一定的参考价值。
Dom
文件对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。
DOM编程：可以操作html所有的标签，进行找、操作！他也是javascript的一部分
1、查找元素：
直接查找
document.getElementById(‘id‘) 查找指定的id，然后我们可以进行操作
<body> <div id =‘id1‘> hello </div> <script type="text/javascript"> var i = document.getElementById(‘id1‘);//找到id位id1的标签 i.innerText=‘tom‘;//标签内容重新赋值 document.getElementsByName(‘name‘); //根据name属性获取标签集合,类似于id,name是给元素分配名字,但区别于ID,不是必须唯一. document.getElementsByClassName(‘classname‘); //根据class属性获取标签集合 document.getElementsByTagName(‘div‘); //根据标签名获取标签集合元素 #nav; //id=nav的元素 通过CSS选择器选取元素 div; //所有<div>元素 通过CSS选择器选取元素 .warning; //所有在class属性之中包含了warnning的元素 通过CSS选择器选取元素 //也可以使用属性选择器: p[lang=‘en‘]; //所有使用英文的段落 如<p lang=‘en‘> *[name=‘tom‘] //所有包含name=tom的属性的元素 //组合使用: div, #log //所有<div>元素,以及id=log的元素 //文档中的所有的元素, document.all() document.all[0] //文档中的第一个元素 document.all["navbar"] //id或name未navbar的元素 </script> </body>
2、间接查找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
3、节点和元素的区别
- 节点：既包含了元素又包含了内容
- 元素：只包含元素
4、注册 事件
事件：比如有一个“按钮”，当你点击的时候发生什么，双击的时候发生什么，这个就叫做事件！
注册：首先这个按钮，当你点击的时候发生的动作，上面的事件要使他出现我们想要的效果，首先得把事件和函数进行绑定，然后把他们注册到指定标签上
常用事件：
- onclick
- onblur
- onfocus
举例代码如下：
写一个input的标签，首先把事件和函数进行绑定，当你一点这个按钮的时候就会自动执行，绑定的函数：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shuaige_js_file</title> <!--导入javascript脚本方法--> <!--<script type="text/javascript" src="t1.js "></script>--> <style> .color_red { background-color: red; } </style> </head> <body> <div id="id_1"> </div> <!--下面的input标签:onclick是个事件他等于一个函数,就是事件和函数进行绑定,应用到标签中就是注册到标签中--> <input type="button" onclick="edit();" value="修改" /> <script type="text/javascript"> function edit() { var i = document.getElementById(‘id_1‘); i.className = ‘color_red‘; } </script> </body> </html>
以上是关于Python之路Day16前端知识篇之DomJQuery的主要内容，如果未能解决你的问题，请参考以下文章
Python之路day13 web 前端（JavaScript，DOM操作）