JaveScript之DOM

悠悠 2022-06-14 05:38 170阅读 0赞

DOM节点  
一、childNodes找到节点； alter(oul.childNodes\[i\].nodeType);测试节点类型  
二、当nodeType==3，该节点是文本节点；当nodeType==1，该节点是元素节点  
三、另一种方法也可以用children代替childNodes，此方法更加方便。  
四、parentNode找到父节点。  
五、offsetParent获取有元素定位的父级。  
六、   
首尾子节点  firstChild   firstElementChild  
            lastChild    lastElementChild  
兄弟节点 nextSibling   nextElementSibling  
         previousSibling   previousElementSibling  
以上节点均有兼容性问题，均有if条件判断可以解决。  
if(oUl.firstElementChild)  
\{  
oUl.firstElementChild.style.background="red";  
\}  
else  
\{  
oUl.firstElementChild.style.background="red";  
\}  
  
  
DOM方式操作元素属性  
获取：getAttribute(名称)  
设置：setAAttribute(名称，要设置的值)  
删除：removeAttribute(名称)  
复习：操作元素的三种方法  
      otxt.value="abc";  
      otxt.\['value'\]="abc";  
      otxt.setA删除Attribute('value'.'abc');  
  
  
用className选择元素（石川DOM基础08 ）  
className是获取元素的class；   
可以用className进行条件筛选；  
  
  
DOM创建元素  
createElement 创建元素  创建一个节点  
父级.appendChild(子节点)   追加一个节点  
  
  
DOM插入元素  
insertBefore(子节点，在谁之前) 在已有元素前插入  
父级.appendChild(子节点)  
兼容性问题  
  
  
DOM删除元素  
oul.removeChild(this.parentNode);  
removeChild(节点)  删除一个节点  
删除当前节点的元素。  
  
  
  
  
DOM创建、插入、删除元素，都是对节点操作  
  
  
DOM之表格操作  
  
  
 表格的便捷写法  
getElementsByTagName("tbody")===tBodies  
gtElementsByTagName("tr")===rows  
getElementsByTagName("td")===cells   
tHead表头   tFoot表尾  
做表格的时候最好吧<tbody></tobody>标签也写上  
  
  
表格的增删是利用对节点的操作然后结合表格的便捷写法。