JavaScript.表单操作.节点.事件

一、表单操作

  1.获得表单引用

    通过直接定位的方式来获取

      document.getElementByid();

      document.getElementsByName();

      document.getElementsByTagname();

    通过集合的方式来获取应用

      document.forms[下标]

      document.forms(“name”)

      document.forms.name

    通过name直接获取(只适应于表单)

      document.name

  2.获取表单元素的应用

    直接获取

      document.getElementByid();

      document.getElementsByname();

      document.getElementsTagname();

    通过集合来获取

      表单对象.elements 获取表单里面所有元素的集合

      表单对象.elements[下标]

      表单对象.elements[“name”]

      表单对象.element.name

    直接通过name的形式

      表单对象.name

  3.表单元素共同的属性和方法

    获取表单元素的值

      表单元素对象.value  获取或是设置值

    属性

      disabled  获取或设置表单控件是否禁用 true  false

      form    指向包含本元素的表单的引用

    方法

      blur()  失去集点

      focus()  获取焦点

  4.文本域

      <input type=“text”>

      操作文本值的域

      value  属性设置 或者获取值

  5.单选按钮

      checked  返回或者设置单选的选中状态  (true选中、false未选中)

      value属性   获取选中的值,必须先判断选中状态

  6.多选按钮

      checked  返回或者设置单选的选中状态  (true选中、false未选中)   

      value    获取选中的值,必须先判断选中状态

  7.下拉框

      selecetd      设置返回或下拉框的选中状态  (true选中、false未选中)

      selectedIndex  设置或返回下拉框被选中的索引号

  8.文本区域

      <textarea></textarea>

      value  操作值

  9.验证表单

    事件

      onsubmit  当表单提交的时候触发事件

      onblur   

      onfocus

      onchange

    return false  阻止事件的默认行为(适用于所有事件)

   10.提交方法

      表单的方法

      表单对象.submit()

节点

  根据dom、HEML文档中的每个成分都是一个节点

  DOM是这样规定的:整个文档是一个文档节点

            每个HTML标签是一个元素节点

            包含在HTML元素中的文本是文本节点

            每一个HTML属性是一个属性节点

            注释属于注释节点

  一、如何获得节点引用

    1.旧的获取节点引用的方式

      getElementByID ()

      getElementByname()

      getElementByTagname()  //返回带有指定标签名的对象集合

    劣势:1.浪费内存

       2.逻辑性不强

    2.通过节点关系属性获得节点的引用

        对象.parentNode获得父节点的引用

        对象.childNodes获得子节点的集合

        对象.firstchild获得第一个子节点

        对象.lastchild获得最后一个子节点

        对象.NextSibiling获得下一个兄弟节点的引用

        对象.previousSibiling获得上一个兄弟节点的引用

      劣势:兼容性不好

         FF会把例如</div>后面所有的空白节点都读成一个子节点

         IE会把最后一个空白的节点读成子节点

  二、节点的信息属性

    节点类型、节点名、节点值

    nodeType(数值 )nodename、nodevalue

    nodeType 属性返回以数字值返回指定节点的节点类型

    如果节点是元素节点,则nodetype属性将返回1

    如果节点是属性节点,则nodetype属性将返回2

    元素节点1  标签名  null

    属性节点2  属性名  属性值

    文本节点3  #text文本

    注释节点8  #comment  注释的文本

    文档节点9   #document null

  三、兼容性的方法

JavaScript增、删、改、查实例

  一、创建节点

    1.创建元素节点

      document.createElements(“元素标签名”)

    2.创建属性节点

      document.createAttribute(“属性名”)

      对象.属性=“属性值”

      对象.getAttribute(属性名,属性值)

      对象.setAttribute(属性名,属性值)

    3.创建文本节点

      对象.innerHTML=“”

      document.createTextNode(“文本”)

  二、追加到文本当中

    父对象.appandChild(追加的对象)插入到最后

    父对象.insertBefore(要插入的对象,之前的对象)插入到最后

  三、修改替换节点

    父对象.replaceChild(要修改的对象,被修改的);

  四、删除节点

    父对象.removeChild(删除的对象)

    如果确定要删除节点,最好也清空内存  对象=null;

JavaScript事件基础和事件绑定

  一、事件驱动

    1.事件

      JavaScript侦测到用户的操作或是页面的一些行为(怎么发生的)

    2.事件源

      引发事件的元素。(发生在谁身上)

    3.事件处理程序

      对事件处理的程序或函数(发生了什么事)

  二、事件的分类

    1.鼠标事件

      onclick

      ondblclick

      onmousedown

      onmouseup

      onmousemove

      onmouseover

      onmouseout

    2.键盘事件

      onkeydown

      onkeyup

      onkeypress  鼠标按下或按住

    3.表单事件

      onsubmit

      onblur

      onfoucs

      onchange

    4.页面事件

  三、如何绑定事件

    1.在脚本中绑定

    2.直接在HTML元素绑定

    3.<script for=“two” event=“onclick”>

     alert (“我是div”)

     </script>

  四、同一个事件绑定多个事件处理程序

    1.自己写

    2.IE:

     对象.attachEvent(“事件(on)”,"处理程序")  添加

     对象.dettachEvent(“事件(on)”,"处理程序")  删除

     FF:

     对象.addEventListenet(“事件”,”处理程序”,布尔值)  添加

     对象.removeEventListenet(“事件”,“处理程序”,布尔值)  删除

    Mozilla中:

     addEventListener的使用方式

     target.addEventListener(type,listener,useCapture)

       target  :文档节点、document、window、XLMhttpRequest

       type  :字符串、事件名称、不含“on”。比如“click”、“mouseover”、“keydown”

       listener:实现了EVentListener接口或者是JavaScript中的函数

       useCapture:是否使用捕捉,一般使用false。

    IE中:

     target.attachEvent(type,listener)

     target  :文档节点、document、window、XMLhttprequest

     type:字符串、事件名称,含“on”。例如“onclick”“onmouseover”“onkeydown”

     listener:实现了EventListener接口或者是JavaScript函数

JavaScript事件对象实例

  一、事件对象

    用来记录一些事件发生时的相关的信息的对象

    1.只有当事件发生的时候才产生,只能在处理函数内部访问

    2.处理函数运行结束后自动销毁

  二、如何获取事件对象

    IE:window.event

    FF

     对象.on事件=function(e){ }

  三、事件对象的属性

    1.关于鼠标事件的事件对象

      相对于浏览器的位置

      clientX当鼠标事件发生的时候,鼠标相对于浏览器X轴的位置

      clientY当鼠标事件发生的时候,鼠标相对于浏览器Y轴的位置

      相对于屏幕的位置

      screenX当鼠标事件发生的时候,鼠标相对于屏幕x轴的位置

      screenY当鼠标事件发生的时候,鼠标相对于屏幕Y轴的位置

      相对于事件的位置

      IE:

      offsetX当鼠标事件发生时,鼠标相对于事件源X轴的位置

      offsetY当鼠标事件发生时,鼠标相对于事件源Y轴的位置

      FF:

      layerX当鼠标事件发生时,鼠标相对于事件源X轴的位置

      laterY当鼠标事件发生时,鼠标相对于事件源Y轴的位置

    2.关于键盘事件的事件对象

      keycode  获的事件的键盘码(空格32、回车13、上38下40左37右39)

      altkey  判断alt健是否被按下 按下是true,否则是false布尔值

      ctrlkey

      shiftkey

      type用来检测事件类型,主要是用于多个事件通用一个事件处理程序的时候

JavaScript事件流和实例应用

  当页面元素触发事件的时候,该元素的容器以及整个页面都会按照特定

  顺序相应该元素的触发事件,事件传播的顺序叫做事件流程

  一、事件流的分类

    1.冒泡型事件(所以浏览器都支持)

     由明确的事件源到最不确定的事件源依次向上触发

    2.捕获型事件

     不确定的事件源到明确的事件源一次向下触发

     addEventListener(事件、处理函数、true)

     addEventListener(事件、处理函数、false)

  二、阻止事件流

    IE:

      事件对象.cancelBubble=true;

    FF:

      事件对象.stopPropagation();

  三、目标事件源的对象

    IE:事件对象.src.Element

    FF:事件对象.target

原文地址:https://www.cnblogs.com/jacky912/p/10342097.html