javascript document

Document

 获取元素节点：

1. document.getElementById(id属性值)

2. document.getElementsByTagName(tag标签名);

    该方式获得一个"集合列表"(数组)对象(无视对象个数), 具体对象获取方式：

        集合[下标]  或  集合.item(下标)

3. document.getElementByName(name属性值)； 不推荐使用，浏览器兼容问题

    原因： 有的浏览器要求被处理得节点必须是form表单的表单域信息

获取文本节点：

1. 首先获取元素节点

2. 获取元素节点内部的子节点（firstChild/lastChild）

3. 获取文本节点的文本信息 nodeValue

子节点和兄弟节点

childNodes: 获取内部子节点信息

    在主流浏览器（火狐，chrome, safari, opera）里边，会把"回车/空白" 也当做空白节点处理

nextSibling: 下个兄弟节点/ previousSibling：上个兄弟节点

parentNode: 获取父节点（html根节点的父节点就是document节点）

获取属性信息： 

1. 节点.属性名称， 该方式只能获取w3c规定的属性  【class 用 className 代替】

2.节点.getAttribute(属性名称), 对于规定/自定义属性都可以获取

设置属性信息

1. 节点.属性名称 =  属性值

2. 节点.setAttribute(属性名称，属性值)

节点的创建和追加

元素节点的创建： document.createElement(tag名称);

文本节点的创建： document.createTextNode('文本');

节点追加： 父节点.appendChild(子节点);

节点替换： 父节点.replaceChild(新节点， 旧节点)

放到指定位置： insertBefore(新节点， 旧节点)

节点复制：

节点.cloneNode(true/false);  true: 深层复制  false: 浅层复制

节点删除： 

节点.removeChild(子节点) // 删除节点

css样式操作

// 只能获取行内样式

获取： 元素节点.style.样式名称

设置： 元素节点.style.样式名称 = 值

事件设置：

元素节点.addEventListener(事件类型, 事件处理[, 事件流]) //实际应用中要阻止事件流

    事件处理： 可以是有名函数和匿名函数

dom2级事件设置： 可以为统一个元素对象绑定多个「同类型」事件（dom1级事件不行）

事件取消操作： 

阻止事件流：

在事件设置函数中，第一个参数是事件对象：

function(evt){ .....} : 其中evt（名字可以随便起符合命名规则就行）就是对应的事件对象

evt.stopPropagation();  //阻止事件流

事件对象作用：

事件对象.keyCode;  获取被触发键子的数值码

阻止浏览器默认动作

evt.preventDefault();

dom1事件还可以： return false; (对于dom2级事件不起作用)