DOM和BOM-day23-个人学习笔记

DOM和BOM-day23-个人学习笔记

一、创建和删除节点

1、创建节点：

创建元素节点：3步

（1）创建空元素对象：

var newElem=document.createElement("标签名");
比如：var a=document.createElement("a");

（2）设置必要属性：

newElem.属性名="值";
newElem.innerHTML="文本";
比如：a.href="http://tmooc.cn";
   a.innerHTML="go to tmooc";

（3）将元素对象挂载到指定父元素下：2种：

a、直接追加

追加：parent.appendChild(newElem);
比如：div.appendChild(a);

强调：只有向已经在页面中的父元素追加新节点，才导致渲染
b、创建文档片段：documentfragment

文档片段：内存中，临时存储多个子节点的存储空间

何时使用文档片段？反复追加多个平级元素

解决：先将所有平级元素先追加到文档片段中，再将文档片段一次性追加到父元素下

创建文档片段:var frag=document.createDocumentFragment();
将子元素追加到文档片段中:frag.appendChild(child);
将frag整体追加到DOM树:parent.appendChild(frag)

2、删除节点：parent.removeChild(oldElem);

节点自删：oldElem.parentNode.removeChild(oldElem);

3、插入新元素：parent.insertBefore(newElem,oldElem);

4、替换节点：parent.replaceChild(newElem,oldElem);

补充：级联下拉列表

（1）onchange：当内容发生改变时触发

（2）select对象：selectedIndex属性：当前选中项的下标

二、HTML DOM常用对象：Table  Select  From

1、table

（1）Table对象：

属性：

tHead tFoot tBodies

rows:获得表中所有行对象

rows[i]:获得表中小标为i的一个行对象

方法：

追加一行

var newRow=insertRow(rowIndex):rowIndex写-1，表示在末尾追加
比如：insertRow（-1）
核心DOM：var newRow=document.createElement("tr")
  table.appendChild(newRow)

删除一行

deleteRow(rowIndex)
比如：table.deleteRow(currRow.rowIndex)
核心DOM：currRow.parentNode.removeChild(currRow)

（2）TableRow对象：代表table对象中的某一个tr对象

table.rows集合就是一组TableRow对象的集合

属性：

cells：当前行中所有td对象

cells[i]：获得当前行中下标为i的td

rowIndex：当前行的下标位置，专用于删除行

方法：

追加单元格

var newCell=insertCell（index）
比如：insertCell（3）
核心DOM：var td=document.createElement("td");
 tr.appendChild(td);

删除单元格

deleteCell(index)

(3)TableCell对象：

属性：cellIndex

2、Select

（1）Select 对象：

属性：

options：获得当前select下所有option

options[i]：获得当前select下i位置的option

selectedIndex：获得当前选中的option的下标

方法：

追加

add（新option对象）
比如：select.add(newOpt);
 select.appendChild(newOpt);

删除

remove（index）

（2）Option对象：指代select下某一个option元素

属性：

index：获取当前option的下标位置，专用于删除

selected：可当做bool用，如果当前option被选中，返回true；否则返回false

如何创建：var newOpt=new Option（innerHTML，value）

创建option对象同时设置对象的innerHTML和value属性

相当于：var newOpt=document.createElement("option");

  newOpt.innerHTML="内容";

  newOpt.value="值";

一句话：创建，设置，追加

select.add(new Option(innerHTML,value));

3、Form对象：

如何找到一个from对象：

var from=document.forms[i/name];

如何找到from中的一个数据采集元素：

var elem=from.elements[i/name];

让元素获得焦点：elem.focus()

让元素失去焦点：elem.blur()

获得焦点的事件：onfocus

失去焦点的事件：onblur

获得当前正在获得焦点的元素：document.activeElement

事件：onsubmit：在正式提交表单前自动触发，对整个表单执行验证

form.onsubmit=function(){
  只要任意一个验证未通过，就取消事件
  var e=window.event||arguments[0]
  if(e.preventDefault){
    e.preventDefault() //DOM
  }else{
     e.returnValue=false //IE8
  }
}