Python全栈 Web（JavaScript DOM节点、事件）-白红宇

1.查询节点

1.根据节点的层级查询节点

1.childNodes

元素节点,文本节点,

2.children

元素节点

3.parentNode

获取父节点

4.nextSibling

获取下一个兄弟节点

有可能是文本节点

5.nextElementSibling

获取下一个兄弟元素节点

6.previousSibling

获取上一个兄弟节点

有可能是文本节点

7.previousElementSibling

获取上一个兄弟元素节点

2.通过标签名查询节点 - 返回数组

document|elem.getElementsByTagName("标签名");

document:整个文档内查找

elem:某个元素内查找

3.通过元素的name属性值查询节点

document.getElementsByName("name属性值");

返回值:包含指定name属性值的元素的数组

4.通过元素的class值查询节点

document|elem.getElementsByClassName("class");

返回:返回包含指定class属性值的所有元素

2.增加节点

1.创建元素节点

语法:

var elem=document.createElement("元素名");

ex:

var div=document.createElement("div");

div.setAttribute("id","container");

div.innerHTML="动态创建的文本";

2.增加节点到网页上

1.document.body.appendChild(elem);

向body中追加elem的新元素

2.parentNode.appendChild(elem);

向parentNode内部追加elem新元素

3.parentNode.insertBefore(newElem,oldElem)

将newElem元素插入到parentNode中oldElem元素之前

3.删除节点

在DOM中,删除节点的行为只能由父元素发起

parentNode.removeChild(elem);

删除 parentNode 中的 elem 元素

4.事件

1.什么是事件

通常都是由用户的行为来激发的操作

2.触发事件的行为

所有的事件在绑定时,必须加

1.鼠标事件

1.click 事件

当鼠标单击元素时触发该事件

2.mouseover 事件

当鼠标移入进元素时的事件

3.mouseout 事件

当鼠标移出元素时的事件

4.mousemove 事件

当鼠标在元素内移动时的事件

2.键盘事件

1.keydown 事件

当键位按下时所激发的事件

2.keypress 事件

当键位按下时所激发的事件

3.keyup 事件

当键位抬起时所激发的事件

3.状态改变事件

1.load 事件

当元素加载完成时所触发的事件(body)

2.change 事件

当选项发生改变时所触发的事件(select)

3.focus 事件

当元素获取焦点时所触发的事件(文本框类)

4.blur 事件

当元素失去焦点时所触发的事件(文本框类)

5.submit 事件

当表单被提交时所触发的事件(表单)

3.绑定的方式

1.在元素中绑定事件

<元素 on事件名=""></元素>

2.在js中动态的为元素绑定事件

语法:

DOM对象.on事件名=function(){

}

ex:

var main = document.getElementById("main");

main.onclick = function(){

}

注意：在JS动态绑定事件中,允许使用 this 来表示触发当前事件的DOM元素

4.事件行为

1.状态改变事件

1.load 事件

通常为 body 绑定 load 事件,目的是为了在所有内容都加载完成之后再实现一些初始化的操作

1. <body οnlοad="函数()">

2.JS中动态绑定

window.onload = function(){

网页加载完成后,要执行的操作

}

2.submit 事件

只有表单被提交时才会被触发

注意:该事件需要一个boolean返回值来通知表单是否要继续被提交.如果返回true,则可以提交表单.否则,阻止表单提交

JS中动态绑定:

表单对象.onsubmit = function(){

return true/false;

}

1.创建一个网页,包含多个单选按钮(name相同)

2.创建一个普通按钮

3.单击普通按钮的时候

验证多个单选按钮中必须有一个被选中

Document

男女

全选吃喝玩乐

点击按钮时

1.先获取三个文本框的值

2.创建两个按钮 - 删除按钮 , 修改按钮

3.先创建四个td

将三个文本框的值追加到前三个td

将两个按钮追加到第四个td中

4.创建一个tr

将四个td追加到tr中

5.将 tr 追加到 table 中

Document

商品名称	商品价格	购买数量	操作

	
     	Document	
     		
      			用户名称						*		
		
      			用户密码						*		
		
      			确认密码						*