【相关推荐：javascript视频教程、web前端】
获取元素通过id获取（getelementbyid）通过name属性（getelementsbyname）通过标签名（getelementsbytagname）通过类名（getelementsbyclassname）通过选择器获取一个元素（queryselector）通过选择器获取一组元素（queryselectorall）获取html的方法（document.documentelement）获取body的方法（document.body）1.通过id获取（getelementbyid）// 1 获取元素节点 // 通过id的方式( 通过id查找元素，大小写敏感，如果有多个id只找到第一个) document.getelementbyid('p1');
上下文必须是document。必须传参数，参数是string类型，是获取元素的id。返回值只获取到一个元素，没有找到返回null。2.通过类名（getelementsbyclassname） // 通过类名查找元素，多个类名用空格分隔,得到一个htmlcollection(一个元素集合，有length属性，可以通过索引号访问里面的某一个元素) var cls = document.getelementsbyclassname('a b'); console.log(cls);
参数是元素的类名。返回值是一个类数组，没有找到返回空数组3.通过name属性（getelementsbyname） // 通过name属性查找，返回一个nodelist(一个节点集合，有length属性，可以通过索引号访问) var nm = document.getelementsbyname('c'); console.log(nm);
4.通过标签名（getelementsbytagname） // 通过标签名查找元素 返回一个htmlcollection document.getelementsbytagname('p');
参数是是获取元素的标签名属性，不区分大小写。返回值是一个类数组，没有找到返回空数组 5.通过选择器获取一个元素（queryselector）document.queryselector('.animated')
参数是选择器，如：”p .classname”。返回单个node，如果有多个匹配元素就返回第一个6.通过选择器获取一组元素（queryselectorall） document.queryselector('.animated')
返回值是一个类数组获取节点 在文档对象模型 (dom) 中，每个节点都是一个对象。dom 节点有三个重要的属性
1. nodename : 节点的名称
2. nodevalue ：节点的值
3. nodetype ：节点的类型
一、nodename 属性: 节点的名称，是只读的。
元素节点的 nodename 与标签名相同属性节点的 nodename 是属性的名称文本节点的 nodename 永远是 #text文档节点的 nodename 永远是 #document二、nodevalue 属性：节点的值
元素节点的 nodevalue 是 undefined 或 null文本节点的 nodevalue 是文本自身属性节点的 nodevalue 是属性的值三、nodetype 属性: 节点的类型，是只读的。以下常用的几种结点类型:
元素类型 节点类型元素 1属性 2文本 3 空格也是返回3注释 8文档 9 创建节点： 1.创建节点:createelement('')
// 创建元素，只是创建出来并未添加到html中，需要与appendchild 配合使用 var elem = document.createelement('p'); elem.id = 'test'; elem.style = 'color: red'; elem.innerhtml = '我是新创建的节点'; document.body.appendchild(elem);
2.插入节点:appendchild ()
用法是： parent.appendchild(child)会将child节点添加到parent里的最后面如果子节点原本就存在，会移除原节点，添加新节点 到最后，但是事件会保留 var onewp=document.createelement(p); var otext=document.createtextnode(world hello); onewp.appendchild(otext);
2-1.插入节点：insertbefore()
用法是 parent.insertbefore(newnode,refnode); var ooldp=document.body.getelementsbytagname(p)[0]; document.body.insertbefore(onewp,ooldp);
删除节点1.删除节点：removechild
用法是：parent.removechild(child) 如果删除的不是父元素的子节点会报错 var op=document.body.getelementsbytagname(p)[0]; op.parentnode.removechild(op);
克隆节点1.克隆节点：parent.clonenode() false 或者true
克隆节点（需要接受一个参数来表示是否复制元素） // 克隆节点（需要接受一个参数来表示是否复制元素） var form = document.getelementbyid('test'); var clone = form.clonenode(true); clone.id = 'test2'; document.body.appendchild(clone);
替换节点1.替换节点 方法node.replace(new,old)
var ooldp=document.body.getelementsbytagname(p)[0]; ooldp.parentnode.replacechild(onewp,ooldp);
文档碎片框 作用：当向document中添加大量的节点时,如果逐个添加将会十分缓慢,这时可以使用文档碎片一次性添加到document中语法：document.createdocumentfragment()；承载节点 (function() { var start = date.now(); var str = '', li; var ul = document.getelementbyid('ul'); var fragment = document.createdocumentfragment(); for(var i=0; i<10000; i++) { li = document.createelement('li'); li.textcontent = '第'+i+'个子节点'; fragment.appendchild(li); } ul.appendchild(fragment); console.log('耗时：'+(date.now()-start)+'毫秒'); // 63毫秒 })();
【相关推荐：javascript视频教程、web前端】
以上就是javascript知识点整理之获取元素和节点的详细内容。