javascriptDom笔记(三)

DOM: 先找，再操作，没有才添加
1. 查找: 
 1. 基于当前节点找周围节点: 
   节点树: 
    parentNode childNodes firstChild 
    lastChild nextSibling previousSibling
   元素树:
    parentElement children 
    firstElementChild 
    lastElementChild 
    nextElementSibling 
    previousElementSibling
 2. 按html属性查找: 
    document.getElementById("id")
    parent.getElementsByTagName("标签");
   parent.getElementsByClassName("class")
    parent.getElementsByName("name");
 3. 按selector查找
    var elem=
      parent.querySelector("selector");
    var elems=
     parent.querySelectorAll("selector");
2. 修改: 
  内容: innerHTML  textContent(innerText)
  属性: 
    标准属性:
      核心DOM:
        elem.getAttribute("属性名");
        elem.setAttribute("属性名",值);
        elem.removeAttribute("属性名");
        elem.hasAttribute("属性名");
      HTML DOM:
        elem.属性名
    自定义属性:
      核心DOM: 
      HTML5: 定义:data-xxx
          访问: elem.dataset.xxx
  样式: 
    内联样式:
      设置: elem.style.属性名
      获取: 
      var style=getComputedStyle(elem)
          style.属性名
    内部/外部样式表:
     1. var sheet=document.styleSheets[i]
     2. var rule=sheet.cssRules[i];
     3. rule.style.属性名

1. 添加和删除元素:
2. HTML DOM常用对象: 
1. 添加和删除元素:
  添加元素: 3步:
    1. 创建空元素:
var elem=document.createElement("标签名")
    比如: 
     var a=document.createElement("a");
     相当于:<a></a>
    2. 设置关键属性:
     比如: a.href="http://tmooc.cn"
           a.innerHTML="go to tmooc";
     相当于:<a href="http://tmooc.cn">
              go to tmooc
            </a>
页面加载过程:
读html，构建DOM Tree
                ↓
            RenderTree→layout→paint
                ↑
读CSS，构建cssRule
 
    3.将新元素添加到指定父元素下:
     parent.appendChild(child);
      将child追加到parent的子元素末尾
     parent.insertBefore(child,oldChild);
      将child插入到oldChild之前
     parent.replaceChild(child,oldChild);
      用child替换parent下的oldChild
  原则: 尽量减少layout的次数，其实就是减少appendChild的使用次数。
    如果同时添加父元素和子元素时:
      先创建父元素，将子元素添加到父元素
      最后将父元素整体添加到页面
    如果父元素已经在页面上，需要同时添加多个同级子元素时:
     文档片段: 内存中，临时存储多个子节点的虚拟父节点。
     为什么: 反复向页面添加多个子节点会导致反复layout，减低效率。
     何时使用: 只要添加多个平级子节点时，都要先将子节点放在文档片段中，再将文档片段整体挂到页面上。
     如何使用: 3步: 
     1. 创建空文档片段： 
var frag=
   document.createDocumentFragment();
     2. 将多个子元素添加到文档片段下
      frag.appendChild(child);
     3. 将片段整体添加到页面上:
       片段不会成为页面上的元素
       添加后，自动释放。

  补: select 
    事件: onchange：当选中项发生改变时
    属性: 
      select.selectedIndex 选中项下标
      select.value: 
       如果option有value,就返回value
       如果option没有value，就返回文本


  删除元素: parent.removeChild(child);

    child.parentNode.removeChild(child);

正课: 
1. HTML DOM常用对象:
  Image  
  Select Option 
  Table...
  Form
 
1. Image: 指页面上一个img元素
  创建: var img=new Image();
            document.createElement("img")
  强调: 只有极个别元素可以new


2. Select: 指一个select元素
  事件: onchange
  属性:
    select.selectedIndex
    select.value
    select.options 获得select下所有option
     select.options.length 获取或设置选项的个数
     可简写为: select.length
  方法:
    select.add(opt)
          .appendChild(opt);
    将opt追加到select元素下
    select.remove(i)
    移除select中i位置的opt


   Option对象: 指select下一个option元素
   创建: var opt=new Option(text,value);
     相当于: 
     var opt=
       document.createElement("option");
     opt.innerHTML=text;
     opt.value=value;
   属性: opt.text


  简写:创建一个新option，同时添加到select
    sel.add(new Option(text,value));


  补: 闭包缺点：占内存，无法自动释放
                  ——内存泄漏
    DOM操作的事件处理函数内，不要形成与DOM对象的闭包。


3. Table: 指代一个table元素
  行分组: 
  tHead var thead=table.createTHead()
        table.deleteTHead()
        table.tHead
  tBodies->tBody 
    var tbody=table.createTBody();
              table.tBodis[i]
  tFoot var tfoot=table.createTFoot()
        table.deleteTFoot()
        table.tFoot


  行:
   行分组.rows
   var tr=行分组.insertRow(i);
     如果省略i，表示末尾追加一行
   行分组.deleteRow(i);
     如果省略i，表示删除第一行
   i都是相对于当前行分组内的下标位置


  格:
   行.cells
   var td=行.insertCell(i);
     强调: 只能创建td元素
   行.deleteCell(i);


  table->tr
   table.rows
   var tr=table.insertRow(i);
   table.deleteRow(i);
   i是相对于整个table的下标位置


   tr.rowIndex属性: 标识当前tr在整个表中的行下标
    所以，如果删除rowIndex标识的行，必须用table。


  补:对话框:
   输入框:prompt
   警告框:alert
   确认框:confirm
     var bool=confirm("确认消息");
     点确认,返回true;否则返回false


4.Form指代页面上一个表单元素: 
  获取表单: 
   var form=document.forms[i/id/name];
    属性:form.length 统计表单元素的个数
    方法: form.submit() //手动提交
  获取表单中的元素: 
   var elem=form.elements[i/id/name]
    方法: elem.focus();
          elem.blur();
    强调: elements集合仅包含表单元素
   简写: form.id/name