JavaScript(5) - 草稿

操作DOM对象

浏览器网页就是DOM树形结构

更新、遍历、删除、添加

要操作首先要获得

       

标题一

       

       

   

   

获取父节点的第一个子节点father.firstChild

获取父节点的最后一个子节father.lastChild

1)更新

操作文本的值 id1.innerText

可以解析HTML文本标签 id1.innerHTML

操作CSS id1.style.属性='值'

属性是要用字符串形式，属性    -连接转成驼峰命名

2）删除

先获取父节点，再通过父节点删除自己 var self = document.getElementById('p1');     

var father = p1.parentElemnt;       

father.removeChild(self);

//删除是动态的操作，如下是不对的father.removeChild(father.children[0]);

father.removeChild(father.children[1]);

father.removeChild(father.children[2]);

删除多个结点时，children是在时刻变化的

children属性是一个只读属性，并且它在子节点变化时会实时更新。

创建和插入

dom为空：innerHTML

dom已经存在元素

追加讲js追加到list的最后

JavaScript

   

       

JavaSE

 

JavaEE

     

JavaME

 

   

创建一个新的标签来实现插入 var js = document.getElementById('js');//已经存在的结点     

var list = document.getElementById('list');        //通过js创建一个新节点       

var newP = document.createElement('p');       

newP.id = 'newP';       

newP.innerText = 'HelloWorld';       

list.appendChild(newP);        //添加script标签       

var myScript = document.createElement('script')       

myScript.setAttribute('type','text/javascript');     

body.appendChild(myScript);        //创建style标签     

var myStyle = document.createElement('style')     

myStyle.setAttribute('type','text/css');       

myStyle.innerHTML = 'body{background-color:blue}';       

document.getElementsByTagName('head')[0].appendChild(myStyle);insertBefore

语法：

要包含的节点

.insertBefore(newNode,targetNode) var ee = document.getElementById('ee');       

var js = document.getElementById('js');       

var list = document.getElementById('list');       

list.insertBefore(js,ee);

操作表单 验证

表单的目的：提交信息

        用户名：

        性别：

        男

        女

   

   

(1）前段加密MD5

初级验证：required必填属性 placeholder

js验证:

表单验证时绑定一个事件onsubmit，将这个返回的结果给表单，再使用onsubmit来接收。