第十四 Dom相关
1.DOM说明
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
2.DOM选择器说明
2.1.直接查找
document.getElementById('id'); //id 选择器
document.getElementsByName('name'); //name选择器
document.getElementsByTagName('tagname'); //标签选择器
document.getElementsByClassName('cname'); //class选择器
2.2.导航查找
parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
2.3.事件绑定
事件绑定方式1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p class="c1" onclick="foo()">this is a p</p> <script> function foo() { alert("stone-pan-fish") } </script> </body> </html>
效果：
事件绑定方式2：
<p class="c1">this is a p</p> <script> var ele_p=document.getElementsByClassName("c1")[0]; ele_p.onclick=function () { alert("the second method!"); } </script>
结果：
this说明：
<p class="c1">this is a p</p> <script> var ele_p=document.getElementsByClassName("c1")[0]; ele_p.onclick=function () { // alert("the second method!"); console.log(this); //代指当前点击的标签 } </script>
查看打印：
点击后：
多个事件绑定？
<p class="c1">this is a p</p> <ul> <li>life</li> <li>is</li> <li>hard</li> </ul> <script> var ele_li=document.getElementsByTagName("li"); for (var i=0;i<ele_li.length;i++) { ele_li[i].onclick=function () { alert("we are li"); } } </script>
效果：
#点击三个li都会弹出结果
2.4.属性操作
2.4.1.属性查看操作：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="c1"><a href="">this is a a</a></div> <script> var ele_div=document.getElementsByClassName("c1")[0]; console.log(ele_div.innerHTML); //查看HTML内容 console.log(ele_div.innerText); //查看文本 </script> </body> </html>
结果：
2.4.2.属性赋值操作
<div class="c1"><a href="">this is a a</a></div> <button>change</button>
点击button的时候，将a标签的内容替换：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="c1"><a href="">this is a a</a></div> <button>change</button> <script> var ele_div=document.getElementsByClassName("c1")[0]; // console.log(ele_div.innerHTML); // console.log(ele_div.innerText); var ele_btn=document.getElementsByTagName("button")[0]; ele_btn.onclick = function () { ele_div.innerText = "fancy"; } </script> </body> </html>
效果：
点击change：
innerHTML 同样效果，但如果替换的是标签呢？
ele_btn.onclick = function () { ele_div.innerHTML = "<p>an article</p>"; }
效果：
点击：
#HTML内容已经被转义
text呢？
var ele_btn=document.getElementsByTagName("button")[0]; ele_btn.onclick = function () { ele_div.innerText = "<p>an article</p>"; }
效果：
点击：
#HTML内容未被转义
2.5.属性修改
2.5.1.属性取值赋值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="c1">ckl div</div> <script> var ele_div=document.getElementsByClassName("c1")[0]; //简单写法 ele_div.id='888'; //赋值 console.log(ele_div.id); //取值 </script> </body> </html>
效果：
原生写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div class="c1">ckl div</div> <script> var ele_div=document.getElementsByClassName("c1")[0]; console.log(ele_div.getAttribute("class")); //取值 ele_div.setAttribute("laopao","bad") //赋值 console.log(ele_div.getAttribute("laopao")); </script> </body> </html>
结果：
2.6.class属性操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c3 { color: #ff0e2e; font-weight: 700; } </style> </head> <body> <div class="c1 c2">ckl div</div> <script> var ele_div=document.getElementsByClassName("c1")[0]; //class属性 console.log(ele_div.className); ele_div.classList.add("c3") </script> </body> </html>
效果：
删除某个class:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c3 { color: #ff0e2e; font-weight: 700; } .c2 { font-style: italic; } </style> </head> <body> <div class="c1 c2">ckl div</div> <script> var ele_div=document.getElementsByClassName("c1")[0]; //class属性 console.log(ele_div.className); ele_div.classList.add("c3") ele_div.classList.remove("c2") //删除如果不存在，也不会报错 </script> </body> </html>
效果：
2.7.修改input的值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="in1" value="1234" class="c1"> <script> var ele_in=document.getElementById("in1"); ele_in.onclick = function () { this.setAttribute("value","ckl"); } </script> </body> </html>
效果：
点击框：
2.8.点击，字体颜色变红，边框变绿色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="in1" value="1234" class="c1"> <script> var ele_in=document.getElementById("in1"); ele_in.onclick = function () { this.setAttribute("value","ckl"); this.style.color="red"; this.style.border="green 1px solid"; } </script> </body> </html>
效果：
点击：
2.8.onchange属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="provience" id="s1"> <option>请选择省份</option> <option value="sx1">陕西省</option> <option value="sx2">山西省</option> <option value="nx">宁夏省</option> </select> <select name="city" id="c1"> <option>请选择城市</option> </select> <script> var ele_sel=document.getElementById("s1"); ele_sel.onchange=function () { alert("wakaka"); console.log(ele_sel.value); } </script> </body> </html>
效果：
选中陕西：
#应用场景，如果是一个选择省份和城市的应用，选择中省份后，获取省份的值，然后选择城市时，可选择的是当前省份的城市
3.实例说明
3.1.原始代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>about dom</title>
<style>
.ckl {
font-weight: 800;
color: mediumvioletred;
}
</style>
</head>
<body>
<div>
<div id="n1" style="color: deepskyblue">wahaha</div>
<a>This is a ponit</a>
</div>
<u1>
<li>We from</li>
<li>the same</li>
<li>world </li>
<li>but we</li>
<li>never...</li>
</u1>
<div>
<div class="ckl">spring</div>
<div class="ckl">summer</div>
<div class="ckl">autum</div>
</div>
</body>
</html>
查看页面：
3.2.通过查找id来修改内容
<script>
var nid = document.getElementById('n1')
console.log(nid.innerText);
id.innerText = 'kangshuaifu';
console.log(nid.innerText);
</script>
查看结果：
3.3.通过标签来修改内容
var dname = document.getElementsByTagName('li');
for(var i in dname){
var item = dname[i];
item.innerText = i;
}
运行结果：
3.4.通过class来查找修改内容
var cname = document.getElementsByClassName('ckl');
for(var j in cname){
var jtm = cname[j];
jtm.innerText = j;
}
查看结果：
3.5.通过name来查找内容
var uname = document.getElementsByName('uname')[0];
var pwd = document.getElementsByName('pwd')[0];
console.log(uname.value,pwd.value);
查看结果：
4.事件选择器
4.1.通过点击按钮让数字自动加1
代码如下：
<div>
<div id="num">
1
</div>
<div>
<input type="button" value="+1" onclick="Add()"/>
</div>
</div>
显示如下：
4.2.分析执行流程
获取到 1 的值 --> 写函数（当点击按钮的时候，出发函数） --> 函数内容（1.通过id获取值 2.将值转换为数字 3.将数字进行自增）
function Add() {
nid = document.getElementById('num');
var text = nid.innerText;
var anum = parseInt(text);
anum += 1;
nid.innerText = anum;
}
执行如下：
5.特殊的value来获取修改值
5.1.text类型的value
<h1>特殊的value</h1>
<input type="text" id="m1"/>
<input type="button" value="获取值" onclick="GetValue()"/>
输入值，点击获取值 ，获取到以后清空
function GetValue() {
var mobj = document.getElementById('m1');
alert(mobj.value);
mobj.value = '';
}
运行：
输入值：
点击获取以后：
再次查看：
5.2.select类型的获取值及修改
代码如下：
<h1>特殊的value</h1>
<input type="text" id="m1"/>
<select id="s1">
<option value="1">NewYork</option>
<option value="2">London</option>
<option value="3">Tokyo</option>
</select>
运行：
选择冬季，获取值：
5.3.textarea 类型的获取值
<textarea id="t1"></textarea>
<input type="button" value="获取值" onclick="GetValue()"/>
输入内容，点击获取值：
6.输入框
6.1.需求如下
输入框，默认里面有 “请输入内容”，当鼠标点进去，文字消失，输入内容后，一直保持。如果没有输入，再点出的时候，显示“请输入内容”
代码如下：
<div>
<input id="r1" value="请输入关键字" onfocus="cklfocus()" onblur="cklblur()"/>
</div>
function cklfocus() {
var fobj = document.getElementById('r1');
fv = fobj.value;
if(fv == "请输入关键字"){
fobj.value = '';
}
}
function cklblur() {
var fobj = document.getElementById('r1');
fv = fobj.value;
if(!fv.trim()){
fobj.value = "请输入关键字";
}
}
展示如下：
点入：
点出：
输入内容：
再点出：
7.创建标签
7.1.第一种方式添加输入框
代码如下：
<div id="container">
</div>
<a href="http://www.baidu.com" onclick="return AddElement();">添加</a> //返回值是false，就不跳转到百度
函数部分
<script>
function AddElement() {
var nid = document.getElementById('container');
var tag = "<input type='text' />";
nid.innerHTML = tag;
return false;
}
</script>
查看结果：
点击添加：
再点击添加，也还只是一个，因为添加覆盖了第一个div里面的内容，解决如下：
<script>
function AddElement() {
var nid = document.getElementById('container');
var tag = "<input type='text' />";
//beforeBegin afterBegin beforeEnd afterEnd
container.insertAdjacentHTML("beforeBegin",tag);
return false;
}
</script>
查看页面并添加：
始终添加再最前面。
7.2.创建标签之添加a标签
代码如下：
<div id="container"> </div> <a href="http://www.163.com" onclick="return AddElement();">添加</a>
函数如下：
<script>
function AddElement() {
var aobj = document.createElement('a') //创建一个a标签
aobj.href = "http://www.baidu.com"; //设置a标签的href属性。
aobj.innerText = "度娘"; //设置a标签的显示名称
var nid = document.getElementById('container'); //获取到container的div内容
nid.appendChild(aobj); //添加内容为创建的a标签对象
return false;
}
</script>
查看结果：
点击添加：
8.标签属性
8.1.原始页面
<div id="container" style="font-size: 24px;color: #ff6f06;">dejavu</div>
8.1.标签属性说明
带有的属性通过“.”来操作，没有的属性，通过setAttribute getAttribute removeAttribute 来操作
查看代码：
<div id="container" style="font-size: 24px;color: #ff6f06;">dejavu</div>
查看页面：
8.2.修改增加一个class属性
8.3.增加一个自定义属性
8.4.修改style里的内容
9.关于表单提交
9.1.查看搜索设置
搜索键是q
9.2.配置form表单提交搜索
<div>
<form action="https://www.so.com/s?ie=utf-8&fr=none&src=360sou_newhome&" method="get">
<input name="q" type="text"/>
<input type="submit" name="提交"/>
</form>
</div>
搜索：
9.3.不通过submit按钮进行提交
<form id='fm1'action="https://www.so.com/s?ie=utf-8&fr=none&src=360sou_newhome&" method="get">
<input name="q" type="text"/>
<div onclick="Submit();">提交</div>
</form>
function Submit() {
var nid = document.getElementById('fm1');
nid.submit();
}
执行操作：
输入内容：
点击提交搜索：
10.提交表单验证
10.1.代码如下
<form id='fm1' action="https://www.so.com/s?ie=utf-8&fr=none&src=360sou_newhome&" method="get">
<input name='q' type="text"/>
<input type="submit" name="提交" onclick="return CklSubmit();"/>
</form>
<script>
function CklSubmit() {
var qcontent = document.getElementsByName('q')[0];
if(qcontent.value.trim()){
return true;
}else {
alert("you must enter a word at least!")
return false;
}
}
</script>
运行：
11.关于confirm
11.1.confirm代码
<div>
<input name='dian' type="button" value="不要点" onmouseover="return cklConfirm();"/>
</div>
<script>
function cklConfirm() {
var cv = confirm();
console.log(cv);
}
</script>
鼠标移上去的时候：
点击确定，查看console的结果：
再来一次，点击取消，查看console的结果：
12.href
window.location.href; 获取当前的详细路径
window.location.reload(); //刷新页面
13.定时器之跑马灯
13.1.跑马灯
setInterval("操作",时间间隔);
<title> My Heart Will Go On</title>
<script>
setInterval("paofunc()",1000);
function paofunc() {
var text = document.title; //获取title内容
var Ftext = text.charAt(0); //获取第一个字母
var Ltext = text.substring(1,text.length); //获取剩余的字母
var newTitle = Ltext + Ftext; //将剩余字母和第一个拼接
document.title = newTitle; //设置titile为新的
}
</script>
演示如下：
13.2.跑马灯停下来
clearInterval(); //清除间隔循环
代码如下：
<input type="button" name="S" value="STOP" onclick="stopPao();"/>
<script>
cklobj = setInterval("paofunc()",1000);
function stopPao() {
clearInterval(cklobj);
}
function paofunc() {
var text = document.title;
var Ftext = text.charAt(0);
var Ltext = text.substring(1,text.length);
var newTitle = Ltext + Ftext;
document.title = newTitle;
}
</script>
查看结果：
点击后，停止
13.3.只执行一次
cklobj = setTimeout("paofunc()",1000);
setTimeout同setInterval用法一模一样。
14.节点操作
14.1.节点添加，删除，替换操作
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer { border: 1px solid red; width: 400px; height: 300px; } </style> </head> <body> <div class="outer"> <h1>you can add sth here</h1> </div> <button class="add">add a</button> <button class="del">del h</button> <button class="chg">change</button> <script> var ele_btn=document.getElementsByClassName("add")[0]; var ele_outer=document.getElementsByClassName("outer")[0]; var ele_del=document.getElementsByClassName("del")[0]; var ele_chg=document.getElementsByClassName("chg")[0]; var ele_h=document.getElementsByTagName("h1")[0]; //获取h1节点 //添加创建节点 ele_btn.onclick = function () { var ele_a=document.createElement("a"); //创建一个节点 ele_a.innerHTML="click here"; //文本赋值 ele_a.href="http://www.baidu.com"; //添加节点对象 父节点.appendChild ele_outer.appendChild(ele_a); }; //删除节点 ele_del.onclick = function () { ele_outer.removeChild(ele_h); //删除节点 }; //替换节点 ele_chg.onclick = function () { //先创建一个新节点 var ele_img=document.createElement("img"); ele_img.src="img/yc.jpeg"; ele_img.style.width = "300px"; ele_img.style.height = "300px"; ele_outer.replaceChild(ele_img,ele_h); //替换节点 } </script> </body> </html>
效果：
添加a标签：
删除h1标签：
替换节点：
14.2.删除，编辑表格
14.2.1.删除操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <thead class="th"> <tr> <td>姓名</td> <td>年龄</td> <td>收入</td> <td>操作</td> </tr> </thead> <tbody id="tb"> <tr> <td>郭兰英</td> <td>68</td> <td>1500</td> <td> <button class="del">删除</button> </td> </tr> <tr> <td>刀郎</td> <td>45</td> <td>8000</td> <td> <button class="del">删除</button> </td> </tr> </tbody> </table> <script> var ele_tb=document.getElementById("tb"); //获取到tbody var ele_btn=document.getElementsByClassName("del"); //删除操作 for (var i=0;i<ele_btn.length;i++){ ele_btn[i].onclick = function () { // console.log(this.parentElement.parentElement); ele_tb.removeChild(this.parentElement.parentElement); //tbody删除子标签，子标签是当前按钮的父的父标签 } } </script> </body> </html>
效果：
删除刀郎：
15.事件
15.1.双击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button class="b1">dian ye</button> <script> var ele_bt=document.getElementsByClassName("b1")[0]; ele_bt.ondblclick = function () { alert("you have clicked twice!"); } </script> </body> </html>
效果：
点击两次：
15.2.onload
页面加载完毕才会执行一个操作，用onload来实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { alert("the page have loaded!") } </script> </head> <body> <!--<button class="b1">dian ye</button>--> <!--<script>--> <!--var ele_bt=document.getElementsByClassName("b1")[0];--> <!--ele_bt.ondblclick = function () {--> <!--alert("you have clicked twice!");--> <!--}--> <!--</script>--> <div> <img src="img/mv.jpg"> </div> </body> </html>
效果：
15.3..submit
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" id="f1"> <p>用户名：<input type="text" name="user"></p>--> <input type="submit"> </form> <script> var ele_f=document.getElementById("f1"); //submit自带默认事件 ele_f.onsubmit = function () { var ele_name=document.getElementsByName("user")[0]; var username=ele_name.value; if (username.length>12 || username.length<5){ //阻止默认事件 return false; } else { alert("提交啦！"); } } </script> </body> </html>
效果：
没有提交，因为字符串少于5个
15.4.事件传播
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer { width: 200px; height: 200px; background-color: #336699; } .inner { width: 100px; height: 100px; background-color: #f1cf6b; } </style> </head> <body> <div class="outer"> <div class="inner"> </div> </div> <script> var ele_out=document.getElementsByClassName("outer")[0]; var ele_in=document.getElementsByClassName("inner")[0]; ele_out.onclick = function () { alert("666"); }; ele_in.onclick = function () { alert("888"); }; </script> </body> </html>
效果：
点击outer：
点击inner：
问题，点击黄色区域出现了两次alert，这是不合理的，这是因为事件传播的原因。阻止如下：
<script> var ele_out=document.getElementsByClassName("outer")[0]; var ele_in=document.getElementsByClassName("inner")[0]; ele_out.onclick = function (e) { alert("666"); }; ele_in.onclick = function (e) { alert("888"); //阻止事件传播 e.stopPropagation(); }; </script>
15.5.keydown
键盘事件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="inp"> <script> var ele_inp=document.getElementById("inp"); //e 是事件对象，存储的是与触发事件相关的信息 ele_inp.onkeydown = function (e) { if(e.key == "h"){ alert("you have pree the key of H"); } } </script> </body> </html>
效果：
无响应，按下h：
15.6.onselect
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="inp"> <script> var ele_inp=document.getElementById("inp"); ele_inp.onselect = function () { alert("you have choose the words!"); } </script> </body> </html>
效果：
选中文字：
15.7.mouseover,mouseleave
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { width: 200px; height: 200px; background-color: #276ba2; } </style> </head> <body> <div class="c1"> </div> <script> var ele_div=document.getElementsByClassName("c1")[0]; //鼠标悬浮事件 ele_div.onmouseover = function () { console.log("you have entered my territorial air space!") }; //鼠标离开事件 ele_div.onmouseleave = function () { console.log("I am going to leave!"); } </script> </body> </html>
效果：
鼠标进入：
离开：
15.8.添加表格示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer { height: 2000px; } .shade { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: #b7b7b7; opacity: 0.8; } .addform { position: fixed; left: 50%; top: 100px; margin-left: -200px; width: 400px; height: 200px; background-color: whitesmoke; } .myhide { display: none; } </style> </head> <body> <div class="outer"> <button class="tijiao">添加表单</button> <table border="1"> <thead class="th"> <tr> <td>姓名</td> <td>年龄</td> <td>收入</td> <td style="text-align: center">操作</td> </tr> </thead> <tbody id="tb"> <tr> <td>郭兰英</td> <td>68</td> <td>1500</td> <td class="gd"> <button class="edit">编辑</button> <button class="del">删除</button> </td> </tr> <tr> <td>刀郎</td> <td>45</td> <td>8000</td> <td> <button class="edit">编辑</button> <button class="del">删除</button> </td> </tr> </tbody> </table> </div> <div class="shade myhide"> <div class="addform myhide"> <form action=""> <p>姓名<input type="text" class="item"></p> <p>年龄<input type="text" class="item"></p> <p>收入<input type="text" class="item"></p> <p> <input type="button" value="提交" class="addcon"> <input type="button" value="取消" class="cancel"> </p> </form> </div> </div> <script> var ele_bt=document.getElementsByClassName("tijiao")[0]; var ele_shade=document.getElementsByClassName("shade")[0]; var ele_addform=document.getElementsByClassName("addform")[0]; var ele_cancel=document.getElementsByClassName("cancel")[0]; var ele_addcon=document.getElementsByClassName("addcon")[0]; var ele_item=document.getElementsByClassName("item"); //隐藏模态对话框 function hidenode() { ele_shade.classList.add("myhide"); ele_addform.classList.add("myhide"); } //显示提示窗 ele_bt.onclick = function () { ele_shade.classList.remove("myhide"); ele_addform.classList.remove("myhide"); }; //取消，隐藏提示窗 ele_cancel.onclick = function () { hidenode(); }; var ele_tb=document.getElementById("tb"); //获取到tbody //提交内容 var ele_tbody=document.getElementById("tb"); ele_addcon.onclick = function () { // console.log(ele_tbody); var ele_tr=document.createElement("tr"); for (var i=0;i<ele_item.length;i++){ // console.log(ele_item[i].value); var ele_td=document.createElement("td"); //获取输入的内容 ele_td.innerHTML=ele_item[i].value; ele_tr.appendChild(ele_td); } //生成固定节点方法 // var ele_edit1=document.createElement("td"); // var ele_btn1=document.createElement("button"); // ele_btn1.classList.add("edit"); // var ele_btn2=document.createElement("button"); // ele_btn2.classList.add("del"); // ele_btn1.innerHTML="编辑"; // ele_btn2.innerHTML="删除"; // // ele_edit1.appendChild(ele_btn1); // ele_edit1.appendChild(ele_btn2); // ele_tr.appendChild(ele_edit1); // // ele_tbody.appendChild(ele_tr); //克隆节点方法 var ele_temp=document.getElementsByClassName("gd")[0].cloneNode(true); ele_tr.appendChild(ele_temp); ele_tbody.appendChild(ele_tr); hidenode(); }; //删除表格操作 var ele_btn=document.getElementsByClassName("del"); // var ele_edt=document.getElementsByClassName("edit"); var ele_edt=document.getElementsByClassName("edit"); console.log(ele_btn.length); for (var i=0;i<ele_btn.length;i++){ ele_btn[i].onclick = function () { // console.log(this.parentElement.parentElement); ele_tb.removeChild(this.parentElement.parentElement); //tbody删除子标签，子标签是当前按钮的父的父标签 } } //编辑表格操作 for (var j=0;j<ele_edt.length;j++){ ele_edt[j].onclick = function () { // console.log(this.parentElement.parentElement.getElementsByTagName("td").length); for (var k=0;k<this.parentElement.parentElement.getElementsByTagName("td").length;k++) { if (k>=3){ break; } var old_text=this.parentElement.parentElement.getElementsByTagName("td")[k].innerHTML; var ele_inp=document.createElement("input"); //创建一个新的input标签 ele_inp.value=old_text; this.parentElement.parentElement.getElementsByTagName("td")[k].innerHTML=""; //清除原来内容 this.parentElement.parentElement.getElementsByTagName("td")[k].appendChild(ele_inp); //添加新的input标签 } } } </script> </body> </html>
效果：
添加表单：
结果：
一、sqlalchemy 普通创建
1.创建表
#!/usr/bin/env python # -*- coding: utf-8 -*- from sqlalchemy import create_engine,Table,Column,Integer,String,MetaData,ForeignKey metadata = MetaData() user = Table('user',metadata, Column('id',Integer,primary_key=True), Column('name',String(20)), ) color = Table('color',metadata, Column('id',Integer,primary_key=True), Column('name',String(20)), ) engine = create_engine("mysql+pymysql://root:123456@192.168.161.129:3306/ckl", max_overflow=5) metadata.create_all(engine)
运行结果：
2.插入数据
conn = engine.connect() sql = user.insert().values(id=456,name='zld') conn.execute(sql)
查看结果：
3.删除数据
conn = engine.connect() sql = user.delete().where(user.c.id > 124) conn.execute(sql)
查看结果：
二、使用类方式操作
2.1.创建表
#!/usr/bin/env python #-*- coding:utf-8 -*- from sqlalchemy import create_engine,func from sqlalchemy.ext.declarative import declarative_base from sqlalchemy import Column,Integer,String,and_,or_,ForeignKey from sqlalchemy.orm import sessionmaker,relationship Base = declarative_base() engine = create_engine("mysql+pymysql://root:629893@192.168.161.129:3306/ckl",echo=True) class Host(Base): __tablename__ = 'hosts' id = Column(Integer,primary_key=True,autoincrement=True) hostname = Column(String(64),unique=True,nullable=False) ip_addr = Column(String(128),unique=True,nullable=False) port = Column(Integer,default=22) if __name__ == "__main__": SessionCls = sessionmaker(bind=engine) session = SessionCls()
运行结果：
2.2.插入数据
#!/usr/bin/env python #-*- coding:utf-8 -*- from sqlalchemy import create_engine,func from sqlalchemy.ext.declarative import declarative_base from sqlalchemy import Column,Integer,String,and_,or_,ForeignKey from sqlalchemy.orm import sessionmaker,relationship Base = declarative_base() engine = create_engine("mysql+pymysql://root:629893@192.168.161.129:3306/ckl",echo=True) class Host(Base): __tablename__ = 'hosts' id = Column(Integer,primary_key=True,autoincrement=True) hostname = Column(String(64),unique=True,nullable=False) ip_addr = Column(String(128),unique=True,nullable=False) port = Column(Integer,default=22) if __name__ == "__main__": SessionCls = sessionmaker(bind=engine) session = SessionCls() #add sql data h1 = Host(hostname='localhost',ip_addr='127.0.0.1') h2 = Host(hostname='Kali',ip_addr='8.9.0.3') session.add_all([h1,h2]) session.commit()
运行结果：
查看数据：
2.3.数据修改
#!/usr/bin/env python #-*- coding:utf-8 -*- from sqlalchemy import create_engine,func from sqlalchemy.ext.declarative import declarative_base from sqlalchemy import Column,Integer,String,and_,or_,ForeignKey from sqlalchemy.orm import sessionmaker,relationship Base = declarative_base() engine = create_engine("mysql+pymysql://root:629893@192.168.161.129:3306/ckl",echo=True) class Host(Base): __tablename__ = 'hosts' id = Column(Integer,primary_key=True,autoincrement=True) hostname = Column(String(64),unique=True,nullable=False) ip_addr = Column(String(128),unique=True,nullable=False) port = Column(Integer,default=22) if __name__ == "__main__": SessionCls = sessionmaker(bind=engine) session = SessionCls() obj = session.query(Host).filter(Host.hostname=='localhost').first() obj.hostname = "benji" session.commit()
查看结果：
2.4.数据删除
#!/usr/bin/env python #-*- coding:utf-8 -*- from sqlalchemy import create_engine,func from sqlalchemy.ext.declarative import declarative_base from sqlalchemy import Column,Integer,String,and_,or_,ForeignKey from sqlalchemy.orm import sessionmaker,relationship Base = declarative_base() engine = create_engine("mysql+pymysql://root:629893@192.168.161.129:3306/ckl",echo=True) class Host(Base): __tablename__ = 'hosts' id = Column(Integer,primary_key=True,autoincrement=True) hostname = Column(String(64),unique=True,nullable=False) ip_addr = Column(String(128),unique=True,nullable=False) port = Column(Integer,default=22) if __name__ == "__main__": SessionCls = sessionmaker(bind=engine) session = SessionCls() obj = session.query(Host).filter(Host.hostname=='benji').first() session.delete(obj) session.commit()
查看结果：
三、关于外键
3.1.创建外键关联表
#!/usr/bin/env python #-*- coding:utf-8 -*- from sqlalchemy import create_engine,func from sqlalchemy.ext.declarative import declarative_base from sqlalchemy import Column,Integer,String,and_,or_,ForeignKey from sqlalchemy.orm import sessionmaker,relationship Base = declarative_base() engine = create_engine("mysql+pymysql://root:629893@192.168.161.129:3306/ckl",echo=True) class Host(Base): __tablename__ = 'hosts' id = Column(Integer,primary_key=True,autoincrement=True) hostname = Column(String(64),unique=True,nullable=False) ip_addr = Column(String(128),unique=True,nullable=False) port = Column(Integer,default=22) group_id = Column(Integer,ForeignKey('groups.id')) #group = relationship('Group') class Group(Base): __tablename__ = 'groups' id = Column(Integer,primary_key=True) name = Column(String(64),unique=True,nullable=False) #hosts = relationship('Host') Base.metadata.create_all(engine) if __name__ == "__main__": SessionCls = sessionmaker(bind=engine) session = SessionCls()
运行结果：
查看表：
3.2.插入数据
#!/usr/bin/env python #-*- coding:utf-8 -*- from sqlalchemy import create_engine,func from sqlalchemy.ext.declarative import declarative_base from sqlalchemy import Column,Integer,String,and_,or_,ForeignKey from sqlalchemy.orm import sessionmaker,relationship Base = declarative_base() engine = create_engine("mysql+pymysql://root:629893@192.168.161.129:3306/ckl",echo=True) class Host(Base): __tablename__ = 'hosts' id = Column(Integer,primary_key=True,autoincrement=True) hostname = Column(String(64),unique=True,nullable=False) ip_addr = Column(String(128),unique=True,nullable=False) port = Column(Integer,default=22) group_id = Column(Integer,ForeignKey('groups.id')) #group = relationship('Group') class Group(Base): __tablename__ = 'groups' id = Column(Integer,primary_key=True) name = Column(String(64),unique=True,nullable=False) #hosts = relationship('Host') #Base.metadata.create_all(engine) if __name__ == "__main__": SessionCls = sessionmaker(bind=engine) session = SessionCls() g1 = Group(name='g1') g2 = Group(name='g2') g3 = Group(name='g3') session.add_all([g1,g2,g3,]) h1 = Host(hostname='lovezhang', ip_addr='2.4.5.6',group_id=g3.id) session.add_all([h1,]) session.commit()
运行结果：
关联外键字段为 NULL
更改表内容，执行如下：
.... g3 = session.query(Group).filter(Group.name=='g3').first() h = session.query(Host).filter(Host.hostname=='lovezhang').update({'group_id':g3.id}) session.commit() ....
运行结果：
3.3.查询关联数据
通过关联互相查询数据
#!/usr/bin/env python #-*- coding:utf-8 -*- from sqlalchemy import create_engine,func from sqlalchemy.ext.declarative import declarative_base from sqlalchemy import Column,Integer,String,and_,or_,ForeignKey from sqlalchemy.orm import sessionmaker,relationship Base = declarative_base() engine = create_engine("mysql+pymysql://root:629893@192.168.161.129:3306/ckl",echo=True) class Host(Base): __tablename__ = 'hosts' id = Column(Integer,primary_key=True,autoincrement=True) hostname = Column(String(64),unique=True,nullable=False) ip_addr = Column(String(128),unique=True,nullable=False) port = Column(Integer,default=22) group_id = Column(Integer,ForeignKey('groups.id')) group = relationship('Group')
class Group(Base): __tablename__ = 'groups' id = Column(Integer,primary_key=True) name = Column(String(64),unique=True,nullable=False) hosts = relationship('Host') if __name__ == "__main__": SessionCls = sessionmaker(bind=engine) session = SessionCls() g3 = session.query(Group).filter(Group.name == 'g3').first() h = session.query(Host).filter(Host.hostname=='lovezhang').first() print("h1:",h.group_id) print('g:',g3.hosts) session.commit()
运行结果：
3.4.通过单方向关联互相查询数据
#!/usr/bin/env python #-*- coding:utf-8 -*- from sqlalchemy import create_engine,func from sqlalchemy.ext.declarative import declarative_base from sqlalchemy import Column,Integer,String,and_,or_,ForeignKey from sqlalchemy.orm import sessionmaker,relationship Base = declarative_base() engine = create_engine("mysql+pymysql://root:629893@192.168.161.129:3306/ckl",echo=True) class Host(Base): __tablename__ = 'hosts' id = Column(Integer,primary_key=True,autoincrement=True) hostname = Column(String(64),unique=True,nullable=False) ip_addr = Column(String(128),unique=True,nullable=False) port = Column(Integer,default=22) group_id = Column(Integer,ForeignKey('groups.id')) group = relationship('Group',backref='host_list')
class Group(Base): __tablename__ = 'groups' id = Column(Integer,primary_key=True) name = Column(String(64),unique=True,nullable=False)if __name__ == "__main__": SessionCls = sessionmaker(bind=engine) session = SessionCls() g3 = session.query(Group).filter(Group.name == 'g3').first() h = session.query(Host).filter(Host.hostname=='lovezhang').first() print("h1:",h.group_id) print('g:',g3.host_list) session.commit()
运行结果：
