DOM节点

节点关系：

• 父子关系 parentNode，firstChild/lastChild/childNodes，childNodes/children

• 兄弟关系 previousSibling/nextSibling，previousElementSibling/nextElementSibling

获取节点：

• element = document.getElementById(id)

• collection = element.getElementByTagName(tagName)返回的是个数组，可以 用下标取数组中的值，也就是选取节点元素，动态的

• collection = element.getElementByTagName(*)返回element元素下所有节点

• collection = element.getElementByClassName(className)，动态的

• list = element.querySelector/All(selector选择器#id，.className)获取到第一个匹配的元素节点/获取到全部节点，获取之后list就不会变了，不是动态的，比如删除了某个节点之后，list依旧不变。

创建节点：

• element = document.createElement(tagName)

获取/设置节点内容：

• element.textContent;获取节点及其后代节点的文本内容

• element.textContent=“content”;设置节点文本内容

• element.innerText;获取节点及其后代节点的文本内容

• element.innerText=“content”;设置节点文本内容

插入节点：

• var achild = element.appendChild(achild);在最末尾插入新元素

• var achild = element.insertBefore(achild,child)//在child节点前面插入achild

删除节点：

• child = element.removeChild(child)

获取属性：

• var attribute = element.getAttribute(attributeName);属性字符串”class”，”value”

设置属性值：

• element.setAttribute(name,value);属性字符串

 

element.innerHTML;节点的HTML内容,可以创建节点，插入节点，删除节点 删除节点 element.innerHTML=””;

element.style.color=”red

element.style.cssText=”color:red;”

element.className+=”newClass”

var style = window.getComputedStyle(element).color

事件注册：

• element.addEventListener(‘click’,clickHandler,还有一个可选参数)

• element.onclick = clickHandler;

取消事件注册：

• element.removeEventListener(‘click’,clickHandler,还有一个可选参数)

• element.onclick = null;

事件触发：

• element.dispatchEvent(‘click’)

事件对象 (event) (e)

stopPropagation阻止冒泡

preventDefault阻止默认行为

stopImmediatePropagation阻止冒泡且阻止后续事件执行

 

MouseEvent对象：

• 属性 clientX，clientY，screenX，screenY，ctrlKey，shiftKey，altKey，button(0/1/2)

FocusEvent：

• 事件类型 focus blur

 

• var w = Window.open(‘http://www,baidu.com’)

• w.close()

JSONP可以跨域。

还是jQuery好用。。。

---分享是程序员的美德