js中的小问题

操作元素属性的3中方式

1.Div.style.display="block";

2.Div.style["display"]="block";

3.Dom方式获取：getAttribute("display") 设置：setAttribute("display","block") 删除：removeAttribute("display");

dom中节点问题

子节点

1.childNodes 有文本节点（nodeType值为3）和元素节点（nodeType值为1）比较奇怪基本不怎么用空白区域即为一个文本节点

2.children只包括元素节点

3. firstChild firstElementChild （类似的lasttChild lastElementChild）firstChild和firstElementChild 的关系类似于第一条，所以在使用过程中多用firstElmentChild，但是低版本的浏览器不识别，故需判断即if(firstElementChild) 即可。

父节点

1offsetParent和parentNode offsetParent反应的是该元素相对那个那个元素定位的节点 parentNode是结构关系中父节点。

兄弟节点

1. nextSibling nextElementSibling （类似的 previousSibling previousElementSibling ）同子节点中第3条。

创建元素

1.createElement("li")

插入节点

1.appendChild() 插入到最后栗子：bb=createElement("li") Xdiv.appendChild(bb) 在Xdiv变量末尾插入一个li元素。过程为先删除原来位置的元素，再插入到新的父节点下

2.insertBefore() 插入到任何位置栗子： bb=createElement("li") Xdiv.insert(bb,dd) 在Xdiv变量的dd前插入一个li元素。

删除节点
1. removeChild();

文档碎片

1 集中处理提高性能 document.createDocument.Fragment(); 有利于低版本浏览器的操作。基本不用了。

利用dom处理表格的快捷做法：

1.tBodies[0]=document.getElementsByTagName('tbody') !!! tHead tFoot 只有一个

rows[1]=document.getElementsByTagName('tr')

cells[2]=document.getElementByTagName('td')

数组中的元素类型可以是任意类型，同时可以进行相关的操作。

添加事件的兼容性问题：

var oEvent=ev||event ie的早期版本只认event 火狐只认ev

事件冒泡问题

事件从底层一直传递到父节点，会导致一系列的问题，可以通过，oEvent.canleBubble=true;解决

事件坐标问题

事件发成位置的坐标属性为clientX clientY 但他们相对的可视区的位置，一般必须和scrollTop（document.body.scrollTop ||document.documentElement.scrollTop）结合使用

键盘事件

事件 onkeydown onkeyup keyCode

阻止默认事件

事件 document.oncontextmenu=function(){

return false;

}

学会封装函数

相关文章