array(2) { ["docs"]=> array(10) { [0]=> array(10) { ["id"]=> string(3) "428" ["text"]=> string(77) "Visual Studio 2017 单独启动MSDN帮助(Microsoft Help Viewer)的方法" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(8) "DonetRen" ["tagsname"]=> string(55) "Visual Studio 2017|MSDN帮助|C#程序|.NET|Help Viewer" ["tagsid"]=> string(23) "[401,402,403,"300",404]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400964" ["_id"]=> string(3) "428" } [1]=> array(10) { ["id"]=> string(3) "427" ["text"]=> string(42) "npm -v;报错 cannot find module "wrapp"" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "zzty" ["tagsname"]=> string(50) "node.js|npm|cannot find module "wrapp“|node" ["tagsid"]=> string(19) "[398,"239",399,400]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400760" ["_id"]=> string(3) "427" } [2]=> array(10) { ["id"]=> string(3) "426" ["text"]=> string(54) "说说css中pt、px、em、rem都扮演了什么角色" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(12) "zhengqiaoyin" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400640" ["_id"]=> string(3) "426" } [3]=> array(10) { ["id"]=> string(3) "425" ["text"]=> string(83) "深入学习JS执行--创建执行上下文(变量对象,作用域链,this)" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "Ry-yuan" ["tagsname"]=> string(33) "Javascript|Javascript执行过程" ["tagsid"]=> string(13) "["169","191"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511399901" ["_id"]=> string(3) "425" } [4]=> array(10) { ["id"]=> string(3) "424" ["text"]=> string(30) "C# 排序技术研究与对比" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "vveiliang" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(8) ".Net Dev" ["catesid"]=> string(5) "[199]" ["createtime"]=> string(10) "1511399150" ["_id"]=> string(3) "424" } [5]=> array(10) { ["id"]=> string(3) "423" ["text"]=> string(72) "【算法】小白的算法笔记:快速排序算法的编码和优化" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "penghuwan" ["tagsname"]=> string(6) "算法" ["tagsid"]=> string(7) "["344"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511398109" ["_id"]=> string(3) "423" } [6]=> array(10) { ["id"]=> string(3) "422" ["text"]=> string(64) "JavaScript数据可视化编程学习(二)Flotr2,雷达图" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "chengxs" ["tagsname"]=> string(28) "数据可视化|前端学习" ["tagsid"]=> string(9) "[396,397]" ["catesname"]=> string(18) "前端基本知识" ["catesid"]=> string(5) "[198]" ["createtime"]=> string(10) "1511397800" ["_id"]=> string(3) "422" } [7]=> array(10) { ["id"]=> string(3) "421" ["text"]=> string(36) "C#表达式目录树(Expression)" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "wwym" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(4) ".NET" ["catesid"]=> string(7) "["119"]" ["createtime"]=> string(10) "1511397474" ["_id"]=> string(3) "421" } [8]=> array(10) { ["id"]=> string(3) "420" ["text"]=> string(47) "数据结构 队列_队列实例:事件处理" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "idreamo" ["tagsname"]=> string(40) "C语言|数据结构|队列|事件处理" ["tagsid"]=> string(23) "["246","247","248",395]" ["catesname"]=> string(12) "数据结构" ["catesid"]=> string(7) "["133"]" ["createtime"]=> string(10) "1511397279" ["_id"]=> string(3) "420" } [9]=> array(10) { ["id"]=> string(3) "419" ["text"]=> string(47) "久等了,博客园官方Android客户端发布" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(3) "cmt" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511396549" ["_id"]=> string(3) "419" } } ["count"]=> int(200) } 222 js 学习之 dom对象 - 爱码网
w410782823

获取节点:

    • document.getElementById(idName)          //通过id号来获取元素,返回一个元素对象
    • document.getElementsByName(name)       //通过name属性获取id号,返回元素对象数组
    • document.getElementsByClassName(className)   //通过class来获取元素,返回元素对象数组(ie8以上才有)
    • document.getElementsByTagName(tagName)       //通过标签名获取元素,返回元素对象数组
  • 获取/设置元素的属性值:
    • element.getAttribute(attributeName)     //括号传入属性名,返回对应属性的属性值
    • element.setAttribute(attributeName,attributeValue)    //传入属性名及设置的值
  • 创建节点Node:
    • document.createElement("h3")       //创建一个html元素,这里以创建h3元素为例
    • document.createTextNode(String); //创建一个文本节点;
    • document.createAttribute("class"); //创建一个属性节点,这里以创建class属性为例
  • 增添节点:
    • element.appendChild(Node);   //往element内部最后面添加一个节点,参数是节点类型
    • elelment.insertBefore(newNode,existingNode); //在element内部的中在existingNode前面插入newNode
  • 删除节点:
    • element.removeChild(Node)    //删除当前节点下指定的子节点,删除成功返回该被删除的节点,否则返回null
  • 获取当前元素的父节点 :
    • element.parentNode     //返回当前元素的父节点对象
  • 获取当前元素的子节点:
    • element.chlidren        //返回当前元素所有子元素节点对象,只返回HTML节点
    • element.chilidNodes   //返回当前元素多有子节点,包括文本,HTML,属性节点。(回车也会当做一个节点)
    • element.firstChild      //返回当前元素的第一个子节点对象
    • element.lastChild       //返回当前元素的最后一个子节点对象
  • 获取当前元素的同级元素
    • element.nextSibling          //返回当前元素的下一个同级元素 没有就返回null
    • element.previousSibling   //返回当前元素上一个同级元素 没有就返回null
  • 获取当前元素的文本:获取当前节点的节点类型:node.nodeType   //返回节点的类型,数字形式(1-12)常见几个1:元素节点,2:属性节点,3:文本节点。
    • element.innerHTML   //返回元素的所有文本,包括html代码
    • element.innerText     //返回当前元素的自身及子代所有文本值,只是文本内容,不包括html代码
  • 设置样式:element.style.color=“#eea”;      //设置元素的样式时使用style,这里以设置文字颜色为例。

二.表单域

1.获取表单域对象
          document.getElementById() //通过id获取表单域对象

     document.foem_name //通过document.form的 name获取表单域对象
          formObj.elements[index] //表单域的对象索引获取其中的元素
          formObj.elements[formarea_name]//通过表单域对象的name属性获取其中的元素
          formObj.formarea_name//通过表单域对象.元素name获取元素

2.表单域对象的属性
           1.readonly
               1)input对象 设置了readonly="readonly",则该表单域只读(用户不能修改其value属性),但是可以提交
               2)通过js为input对象添加“只读”属性,应通过“对象.readOnly = true”添加
               3)readonly="readonly" 只能使用在<input type=\'text\'> 及 <textaread>标签中
           2.disabled
               1)input对象 设置了disabled="disabled",则该表单域不可用(用户不能修改其value属性)且不能提交
               2)通过js为input对象添加“不可用”属性,应通过“对象.disabled = true”添加
               3)disabled="disabled"可以将所有的表单域失效
           3.name
               1)用于获取该表单域
               2)只有设置了name属性的表单域才可以提交
           4.value
               1)用户输入的内容就是value,表单会提交该属性的值
               2)select标签的value值就是当前选中的option的value值
              3)textarea没有value属性,提交时提交标签中间的文本值
          5.form
               用于获取表单域所在的表单对象
           6.type
               浏览会根据type的值不同,显示表单域也不同
           7.checked
               1)对于<input type="radio"> 和 <input type="checkbox">来讲,checked="checked"表示默认选中该选项
               2)<input type="radio"> 只能给同组的一个添加 checked="checked"
               3)<input type="checkbox"> 可以给同组的所有添加 checked="checked"
               4)通过js为对象添加“默认选中”属性,应通过“对象.checked = true”添加

8.  get方式和post方式的区别
       1.get方式会将提交的数据以(?name1=value1&name2=value2...)放在url后面
           post方式会将数据以(name1=value1&name2=value2...)放在“请求实体”中
        2.get将数据放在url后,由于url是有长度的,且url是可见,所以get方式不适合发送一些敏感数据
           post方式将数据放在“请求实体”中,理论上是无限制,post方式适合发送一些敏感数据
        3.get方式请求会有缓存
           post方式请求不会有缓存

9.enctype的值的区别
      1.application/x-www-form-urlencoded(默认、且常用)
          无论post方式还是get方式提交,表单数据均以(name1=value1&name2=value2...)组织数据
     2.multipart/form-data(表单上传文件时)
          1)get方式,表单以(name1=value1&name2=value2...)组织数据
          2)post方式,表单数据会放在类似于“------WebKitFormBoundaryGSF0lHBAvwWyAcuV”字符串中间
     3.text/plain
        1)get方式,表单以(name1=value1&name2=value2...)组织数据
        2)post方式,表单数据会以name1=value2,name2=value2,数据之间没有连接符号

10.表单对象的事件
         1.对于表单中设置的提交、重置按钮,会触发onsubmit事件、onreset事件
         2.在表单外部通过submit()提交表单不会触发onsubmit事件
         3.在表单外部通过reset()重置表单会触发onreset事件
         4.我们将onsubmit事件、onreset事件返回一个false就可以阻止事件的执行

     

 

分类:

技术点:

相关文章: