带着例子学Dom 几行代码就搞定!
DOM查找
document代表整个文档
按id属性,精确查找一个元素对象
document.getElementById() //(唯一标识)元素id 在Ie8以下的浏览器,不区分id大小写,而且也返回匹配name属性的元素
按标签名查找 返回一个动态集合
document.getElementsByTagName() // 标签名
通过name属性查找 返回一个动态集合
document.getElementByName(); //,需注意,只有部分标签name可生效(表单,表单元素,img,iframe)
通过class查找 返回一个动态集合
document.getElementsByClassName() // 类名 -> ie8和ie8以下的ie版本中没有,可以多个class一起
通过CSS选择器查找 返回一个动态集合
document.querySelector() // css选择器 在ie7和ie7以下的版本中没有(缺点不能实时更新)
通过CSS选择器查找 返回一个动态集合
document.querySelectorAll() // css选择器 在ie7和ie7以下的版本中没有(缺点不能实时更新)
节点的类型 nodeType
元素节点 —— 1
属性节点 —— 2
文本节点 —— 3
注释节点 —— 8
document —— 9
DocumentFragment —— 11
获取节点类型 nodeType
(更正:图示属性节点 更正为 元素节点 nodeType 值为 1)
遍历节点树
parentNode -> 父节点 (最顶端的parentNode为#document);
childNodes -> 子节点们
firstChild -> 第一个子节点
lastChild -> 最后一个子节点
nextSibling->后一个兄弟元素
previousSibling->前一个兄弟元素
加深理解 习题1——编辑函数,封装children功能,解决以前部分浏览器的兼容性问题
//获取div元素 获取span元素
var div = document.getElementsByTagName('div')[0];
var span = document.getElementsByTagName('span')[0];
//在原型链上定义myChildren函数
Element.prototype.myChildren = function(){
//将当前元素节点的直接子节点赋值给child
var child = this.childNodes;
//获取直接子节点的个数
var len = child.length;
//定义空数组
var arr = [];
//遍历子节点
for(var i = 0;i < len;i++){
//若子节点nodeType值为 1 即为元素节点
if(child[i].nodeType == 1){
//将该元素节点放在arr数组内
arr.push(child[i]);
}
}
//返回 当前元素节点的所有直接子元素节点
return arr;
}
基于元素节点树的遍历
parentElement -> 返回当前元素的父元素节点 (IE9及以下不兼容)
children -> 只返回当前元素的元素子节点
node.childElementCount === node.children.length当前元素节点的子元素节点个数(IE9及以下不兼容)
firstElementChild -> 返回的是第一个元素节点(IE9及以下不兼容)
lastElementChild -> 返回的是最后一个元素节点(IE9及以下不兼容)
nextElementSibling / previousElementSibling ->返回后一个/前一个兄弟元素节点(IE9及以下不兼容)
节点的四个属性
nodeName 元素的标签名,以大写形式表示,只读
nodeValue Text节点或Comment节点的文本内容,可读写
nodeType 该节点的类型,只读
attributes Element 节点的属性集合
Node.hasChildNodes判断是否包含指定属性
document.getElementById('bt1').hasAttribute('onclick');
DOM继承树
(document --> HTMLDocument.protptype --> Document.prototype)
DOM树 加深理解
<script>
HTMLBodyElement.prototype.abc='demo';
var body = document.getElementsByTagName('body')[0];
var head = document.getElementsByTagName('head')[0];
//根据继承树 head 不属于HTMLBodyElement
</script>
<script>
HTMLElement.prototype.abc='demo';
var body = document.getElementsByTagName('body')[0];
var head = document.getElementsByTagName('head')[0];
//根据继承树 head body 属于HTMLElement
</script>
1.getElementById方法定义在Document.prototype上,即Element节点上不能使用。
2.getElementsByName方法定义在HTMLDocument.prototype上,即非html中的document以外不能使用(如xml document,Element)
3.getElementsByTagName方法定义在Document.prototype 和 Element.prototype上
<script>
var div = document.getElementsByTagName('div')[0];
//div 下面的 span 元素
var span = div.getElementsByTagName('span')[0];
</script>
4.HTMLDocument.prototype定义了一些常用的属性,body,head,分别指代HTML文档中的标签。
5.Document.prototype上定义了documentElement属性,指代文档的根元素,在HTML文档中,他总是指代元素(document.documentElement --> html)
6.getElementsByClassName、querySelectorAll、querySelector在Document,Element类中均有定义
加深理解 习题2——封装函数,返回元素e的第n层祖先元素
<body>
<div>
<p></p>
<span>
<strong></strong>
<i></i>
</span>
</div>
<script>
function retParent(elem,n){
while(elem && n){
elem = elem.parentElement;
n--;
}
return elem;
}
var i = document.getElementsByTagName('i')[0];
</script>
</body>
加深理解 习题3——编辑函数,封装children功能,解决以前部分浏览器的兼容性问题
<body>
<div>
<p></p>
<span>
<strong></strong>
<i></i>
</span>
</div>
<script>
var div = document.getElementsByTagName('div')[0];
Element.prototype.myChildren = function(){
var child = this.childNodes;
var len = child.length;
var arr = [];
for(var i = 0;i < len;i++){
//nodeType == 1为元素节点
if(child[i].nodeType == 1){
arr.push(child[i]);
}
}
return arr;
}
</script>
</body>
DOM修改
修改属性
1.Element节点的一些属性
innerHTML
innerText(火狐不兼容) / textContent(老版本IE不好使)
2. Element节点的一些方法
ele.setAttribute()//设置属性值
ele.getAttribute();//获取属性值
ele.removeAttribute();//移除属性
//设置div class属性 属性值为content
var div = document.getElementsByTagName(“div")[0];
div.setAttributeNode(“class”,"content");
//获取div标签 class的属性值
div.getAttributeNode(“class”);
//删除div标签 class 属性
div.removeAttribute('class');
加深理解 为所有元素加上class属性,属性名为对应标签名
var all = document.getElementsByTagName('*');
for(var i = 0;i < all.length;i++){
all[i].setAttribute('this-name',all[i].nodeName);
}
加深理解 习题4——请编写一段JavaScript脚本生成下面这段DOM结构。要求:使用标准的DOM方法或属性。提示 dom.className 可以读写class。
<div class="example">
<p class="slogan">alalasheep@163.com</p>
</div>
代码实现
//创建 div 元素节点
var div = document.createElement('div');
//创建 p 元素节点
var p = document.createElement('p');
//创建 文本节点
var text = document.createTextNode('alalasheep@163.com');
//为新创建的div标签设置属性名为class 值为 example
div.setAttribute('class','example');
//为新创建的p标签设置属性名为class 值为 slogan
p.setAttribute('class','slogan');
//将 p 标签添加到 div标签内
div.appendChild(p);
//将文本节点 添加到p标签内
p.appendChild(text);
//将整个 div 挂在 Dom树上
document.body.appendChild(div);
修改样式
内联样式: elem.style.属性名
强调: 属性名: 去横线,变驼峰
比如:
css: background-color => backgroundColor
list-style-type => listStyleType
var span = document.getElementsByTagName("span")[0];
var div = document.getElementsByTagName("div")[0];
//修改单个样式
span.style.color = "red";
//驼峰式命名
span.style.backgroundColor = "#096";
//修改样式集合
div.style.cssText="width:200px;height:200px;background-color:red;";
DOM添加
-
创建空元素
document.createElement();//创建元素节点
document.createTextNode();//创建文本节点
document.createComment();//创建注释节点
document.createDocumentFragment();//创建文档碎片 -
添加元素的步骤
- 设置关键属性
a.innerHTML="go to tmooc"
a.herf="http://tmooc.cn";
<a href="http://tmooc.cn">go to tmooc</a>
- 设置关键样式
a.style.opacity = "1";
a.style.cssText = "width: 100px;height: 100px";
- 将元素添加到将元素添加到DOM树
PARENTNODE.appendChild();//添加子节点
var div = document.createElement( 'div' );
var txt = document.createTextNode('alalasheep');
div.appendChild(txt);
//标签元素 最终要挂在body上
document.body.appendChild(div);
PARENTNODE.insertBefore(a, b);//在a节点前添加b节点
var ul = document.getElementById('menu');
var newLi = document.createElement('li');
//在父元素中的最后一个子节点之前添加一个新的子节点
ul.insertBefore(newLi, ul.lastChild);
加深理解 习题5——封装函数insertAfter();功能类似insertBefore();
//在原型链上封装 将 targetNode 插在 afterNode 之后
Element.prototype.insertAfter = function(targetNode,afterNode){
//将afterNode的下一个兄弟节点赋值给beforeNode
var beforeNode = afterNode.nextElementSibling;
//如果afterNode没有下一个兄弟节点就在当前节点下面添加子节点targetNode
if(beforeNode == null){
this.appendChild(targetNode);
}
//否则在在下一个兄弟节点之前插入targetNode
else{
this.insertBefore(targetNode,beforeNode);
}
}
var div = document.getElementsByTagName('div')[0];
var p = document.getElementsByTagName('p')[0];
var span = document.createElement('span');
var text = document.createTextNode('lalasheep');
span.appendChild(text);
div.insertAfter(span,p);
- 删除子节点
parent.removeChild();//删除子节点
var div = document.getElementsByTagName('div')[0];
var span = document.getElementsByTagName('span')[0];
//删除div标签下的span标签
div.removeChild(span);
- 替换节点(不常用)
parent.replaceChild(new, origin);
添加元素优化
文档片段: 内存中,临时保存多个平级子元素的 虚拟父元素 用法和普通父元素完全一样
如何:
1.创建片段
var frag=document.createDocumentFragment();
2.将子元素临时追加到frag中
frag.appendChild(child);
3.将frag追加到页面
parent.appendChild(frag);
强调: append之后,frag自动释放,不会占用元素
熬夜用心总结,有用记得点赞+收藏+评论