首页 > 代码库 > javascript操作DOM方法整理

javascript操作DOM方法整理

  原自本人整理,主要来源于这里。大家如果有补充,十分欢迎大家留言。

  一、获取节点

document.getElementById();//id=""document.getElementsByName();//name=""document.getElementsByTagName();//"input"document.getElementsByClassName();//class=""

  二、css选择器

 

document.querySelector();//根据css选择器规则返回第一个匹配到的元素,"#div1>p"document.querySelectorAll();//返回所有匹配到的元素

 

  三、文档结构

//(1)作为节点数的文档    parentNode    //获取该节点的父节点        childNodes    //获取该节点的子节点数组    firstChild    //获取该节点的第一个子节点    lastChild    //获取该节点的最后一个子节点    nextSibling    //获取该节点的下一个兄弟元素    previoursSibling    //获取该节点的上一个兄弟元素    nodeType    //节点的类型,9代表Document节点,1代表Element节点,3代表Text节点,8代表Comment节点,11代表DocumentFragment节点    nodeVlue    //Text节点或Comment节点的文本内容    nodeName    //元素的标签名(如P,SPAN,#text(文本节点),DIV),以大写形式表示    //注意,以上6个方法连元素节点也算一个节点
//(2)作为元素树的文档 firstElementChild //第一个子元素节点 lastElementChild //最后一个子元素节点 nextElementSibling //下一个兄弟元素节点 previousElementSibling //前一个兄弟元素节点 childElementCount //子元素节点个数量 //注意,此5个方法文本节点不算进去

  四、javascript操作DOM

document.getElementById("img1").alt;       // 获取alt属性document.getElementById("img1").src=""; //设置src属性document.getElementById("img1").setAttribute("src", "1small.jpg");//非标准document.getElementById("img1").getAttribute("class");//非标准

  

javascript操作DOM方法整理