DOM操作
获取元素
document.getElementById()
document.getElementsByTagName()
document.getElementsByName()
修改元素的内里面容
先获取元素节点node
node.innerHTML='里面可以写HTML代码'
获取元素的属性
先获取元素节点node
node.getAttribute()
修改元素属性
先获取元素节点node
修改id
node.id='xxx';
修改class
node.className='xxx'
增加属性
node.setAttribute(新属性名,'xxxx');
node.新属性 = 'xxx';
删除属性
node.removeAttribute('属性名');
访问元素的父节点
先获取元素节点node
node.parentNode获取直接的父节点
访问元素的子节点
node.childNodes获取所有的直接子节点(包括空格也是一个节点)
创建元素节点
document.createElement('要创建的元素名');
创建文本节点
document.createText('要创建的文本内容');
创建的文本节点(node)不能通过 node.innerHTML = '' 的形式进行赋值
插入节点
在node节点里面的ref_node上面插入一个节点,
node.insertBefore(new_node,ref_node);
追加节点
在node节点里面追加一个new_node节点
node.appendChild(new_node)
删除节点
删除node的子节点node_del
node.removeChild(node_del);
修改元素的css样式
获取node节点更改它的css样式
node.style.属性名 = '新值';
节点类型
用node.nodeType查看节点类型
ELEMENT_NODE 1 元素节点
ATTRIBUTE_NODE 2 属性节点
TEXT_NODE 3 文本节点
CDATA_SECTION_NODE 4 CDATA 区段
ENTITY_REFERENCE_NODE 5 实体引用
ENTITY_NODE 6 实体
PROCESSING_INSTRUCTION_NODE 7 处理指令
COMMENT_NODE 8 注释节点
DOCUMENT_NODE 9 文档节点
JS事件处理 事件冒泡
从具体到广泛
事件捕获
从广泛到具体
HTML事件处理
直接在html的元素里面的事件属性里面赋值相应的函数
例子:<button id="btn" οnclick="get(),hello()">按钮</button>
缺点:修改函数名的时候要改两处,修改麻烦
DOM0级事件处理
把函数赋值给一个事件处理程序
例子:var btn = document.getElementById('btn');
btn.onclick = hello;
function hello(){
alert('hello');
}
DOM2级事件处理
通过EventListener添加事件处理
优点:事件之间不会被覆盖
DOM的EventListener
事件监听之间不会覆盖
添加事件监听
node节点添加点击事件
node.addEventListener('click',函数名);
移除事件监听
node.removeEventListener('click',函数名);
IE事件处理
attachEvent();
removeEvent();
事件对象
type属性获取事件的类型
target获取事件的目标
stopPropagation()阻止事件冒泡
preventDefault()阻止默认行为
例子:像链接的跳转行为
js内置对象 Date对象
var date = new Date();
Array对象
var ary = new Array(这里自不指定大小都不是必须的);
例子:
var ary = new Array();
ary[3] = 3;
alert(ary[0]);
alert(ary[3]);
这里会弹出一个underfined和一个3