js中的小问题

时间:2021-09-09 17:37:11

 操作元素属性的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;

}



学会封装函数