Dom基本操作

DOM查找

节点的类型 nodeType
遍历节点树
基于元素节点树的遍历
节点的四个属性
DOM继承树

DOM修改

修改属性
修改样式

DOM添加

添加元素优化

带着例子学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('[email protected]');
         //为新创建的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自动释放，不会占用元素

熬夜用心总结，有用记得点赞+收藏+评论
在这里插入图片描述

@小白羊

发布了26 篇原创文章 · 获赞 98 · 访问量 1万+

私信关注

[ JavaScript ] 敲完这几行代码，DOM基本操作也就学会了！

Dom基本操作

DOM查找

节点的类型 nodeType

遍历节点树

基于元素节点树的遍历

节点的四个属性

DOM继承树

DOM修改

修改属性

修改样式

DOM添加

添加元素优化

猜你喜欢