ASP源码
PHP源码
.NET源码
JSP源码
【相关推荐:javascript视频教程、web前端】
// 1 获取元素节点
// 通过id的方式( 通过id查找元素,大小写敏感,如果有多个id只找到第一个)
do***ent.getElementById('p1');
// 通过类名查找元素,多个类名用空格分隔,得到一个HTMLCollection(一个元素集合,有length属性,可以通过索引号访问里面的某一个元素) var cls = do***ent.getElementsByClassName('a b'); co***le.log(cls);
// 通过name属性查找,返回一个NodeList(一个节点集合,有length属性,可以通过索引号访问) var nm = do***ent.getElementsByName('c'); co***le.log(nm);
// 通过标签名查找元素 返回一个HTMLCollection
do***ent.getElementsByTagName('p');
do***ent.querySelector('.animated')
do***ent.querySelector('.animated')
在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性
1. nodeName : 节点的名称
2. nodeValue :节点的值
3. nodeType :节点的类型
一、nodeName 属性: 节点的名称,是只读的。
二、nodeValue 属性:节点的值
三、nodeType 属性: 节点的类型,是只读的。以下常用的几种结点类型:
1.创建节点:createElement('')
// 创建元素,只是创建出来并未添加到html中,需要与appendChild 配合使用 var elem = do***ent.createElement('p'); elem.id = 'test'; el***style = 'color: red'; el***innerHTML = '我是新创建的节点'; do***ent.body.appendChild(elem);
2.插入节点:appendChild ()
var oNewp=do***ent.createElement("p"); var oT***=document.createTextNode("World Hello"); oN***.appendChild(oText);
2-1.插入节点:insertBefore()
var oOldp=do***ent.body.getElementsByTagName("p")[0]; do***ent.body.insertBefore(oNewp,oOldp);
1.删除节点:removeChild
var op=do***ent.body.getElementsByTagName("p")[0]; op***rentNode.removeChild(op);
1.克隆节点:pa***t.cloneNode() false 或者true
// 克隆节点(需要接受一个参数来表示是否复制元素) var form = do***ent.getElementById('test'); var clone = fo***cloneNode(true); clone.id = 'test2'; do***ent.body.appendChild(clone);
1.替换节点 方法no***replace(new,old)
var oOldp=do***ent.body.getElementsByTagName("p")[0]; oO***.parentNode.replaceChild(oNewp,oOldp);
(function() { var start = Date.now(); var str = '', li; var ul = do***ent.getElementById('ul'); var fragment = do***ent.createDocumentFragment(); for(var i=0; i<10000; i++) { li = do***ent.createElement('li'); li***xtContent = '第'+i+'个子节点'; fr***ent.appendChild(li); } ul***pendChild(fragment); co***le.log('耗时:'+(Date.now()-start)+'毫秒'); // 63毫秒 })();
【相关推荐:javascript视频教程、web前端】
以上就是JavaScript知识点整理之获取元素和节点的详细内容,更多请关注源码网其它相关文章!