常见的DOM操作

作者: ErrorCode233 | 来源:发表于2018-07-19 09:39 被阅读11次

1 offsetParent

offsetParent 作用：找到最近的有定位的（不能为stactic）父级，它会一层一层的往外找，如果没有找到的话，默认为body。
父级必须为绝对定位或者相对定位，自己有没有定位无所谓。
语法：

元素.offsetParent

<div id="box1"style="position: relative">1
    <div id="box2">2
        <div id="box3" style="position: absolute">3
            <div id="box4">4</div>
        </div>
    </div>
</div>

<script>
    var box4=document.getElementById("box4");
    var box2=document.getElementById("box2");  
    
    console.log(box2.offsetParent);         //box1
    console.log(box4.offsetParent);         //box3
</script>

2. offsetLeft

offsetLeft 作用：找到最近的有定位的父级，获取到它与这个父级的距离。
从元素最左边到父级最左边的距离。
注意：如果没找到有定位的父级，那这是到html的距离
语法：

元素.offsetLeft

注意：使用DOM方法获取的距离，长宽是没有单位的

console.log(box2.offsetLeft)        //149

3.offsetTop

offsetTop 作用：找到最近的有定位的父级，获取到它与这个父级的距离。从元素顶部到父级的最顶部的距离。
注意：如果没找到有定位的父级，那这是到html的距离
语法：

元素.offsetTop

console.log(box2.offsetTop)     //171

4. getBoundingClientRect

getBoundingClientRect 可以获取元素盒模型的相关信息，然后返回一个由这些数据组成的一个对象。
对象中的内容： width height top bottom left right
语法：

元素.getBoundingClientRect()

返回值：
返回一个对象，这个对象中存在了元素的盒模型的相关信息。

注意：

得到的width，是包含边框的。
得到的height，是包含边框的。
得到的left，是元素左边到左边可视区的距离。
得到的right，是元素右边到左边可视区的距离。
得到的top，是元素上边到上边可视区的距离。
得到的bottom，是元素下边到上边可视区的距离。

var box=document.getElementById("box");
var boxMessage=box.getBoundingClientRect();
console.dir(boxMessage);
console.log(boxMessage.width);  //102
console.log(boxMessage.left);   //200   左边离可视区的距离
console.log(boxMessage.right);  //302   右边离左边可视区的距离
console.log(boxMessage.top);    //100
console.log(boxMessage.bottom); //202

firefox浏览器下会出现小数

5.DOM属性操作

5.1 getAttribute

作用：获取属性，它不但可以获取标签自带的属性，也可以获取自定义的属性。（使用 . 或者 [] 获取自定义属性会返回 undefined）

语法：

元素.getAttribute()

参数：要获取的属性名
返回值：返回获取的结果。
使用 getAttribute 获取 src，href 等属性的值，属性里写的是什么内容就会获取到什么内容。

<img id="img" src="img/1.jpg">
<div id="box" miaoV="kaivon"></div>

<script>
var img=document.getElementById("img");
var box=document.getElementById("box");

console.log(img.src)                    //"http://localhost:63342/M-project/5.31/2016-05-31/img/1.jpg"
console.log(box.miaov)                   //undeifined
console.log(img.getAttribute("src"))     //img/1.jpg
conosle.log(box.getAttribute("miaoV"))   //kaivon
</script>

5.2 setAttribute

setAtteibute 作用：设置属性。可以设置自定义属性，也可以设置标签自带的属性。

语法：

元素.setAttribute(attr,value)

参数：
attr：要设置的属性名
value：要设置的属性值

返回值：无

<div>一个容器</div>

<script>
    var box = document.querySelect("div");
    var a = box.setAttribute("id","box");
    console.log(a);         //undefined
</script>

5.3 removeAttribute

removeAttribute 作用：删除元素的属性。

语法：

元素. removeAttribute(attr)

参数：
要删除的属性名

返回值：无

<div title="box">一个容器</div>
<script>
    var box = document.querySelect("div");
    var a = box.removeAttribute("title");
    console.log(a);         //undefined
</script>

6 元素的宽高

6.1 元素的宽

offsetWidth 作用：获得元素的宽，包含border的值。
clientWidth 作用：获取元素的宽，不包含border的值。

语法：

元素.offsetWidth
元素.clientWidth

6.2 元素的高

offsetHeight 作用：获取元素的高，包含border的值
clientHetght 作用：获取元素的高，不包含border的值

语法：

元素.offsetHeight
元素.clientHeight

7.可视区域的宽高

可视区域的宽:

document.documentElement.clientWidth

可视区域的高：

document.documentElement.clientHeight

如果窗口改变，这两个值也会改变
使用上面方法获取的可视区域宽高不包括滚动条

8 创建元素 createElement

createElement 作用：创建元素，根据参数的名字创建对应的标签。

语法：

document.createElement(tagName)

只有document才有这个方法

参数：
tagName：需要创建的元素的标签名字

返回值：返回创建的新元素值。

var div=document.createElement('div');
div.id='box';
div.style.background='red';
div.innerHTML='这是一个div'
console.log(div)

创建后可以给它添加属性样式等。
它不能创建文本，注释节点。

9 添加元素 appendChild

appendChild 作用：添加元素：往父元素里添加相应的子节点。

语法：

父元素.appendChild(chileNode)

参数：
要添加的元素（只能是一个标签节点）

返回值：
返回要添加的那个元素（参数），只能添加标签节点。

var div=document.createElement('div');
div.innerHTML='这是个div';
div.style.color='red';
div.style.border='10px solid #ccc'; 
                    
var result=document.body.appendChild(div);
console.log(result);    //返回传进来的参数

10 插入元素 insertBefore

insertBefore 作用：插入元素：把第一个节点插入到第二个节点前面。

语法:

父节点.insertBefore(childNode1,childNode2)

参数：
childNode1 要插入的节点
childNode2 决定插入的节点位置的节点
第二个参数为null的话，相当于 appendChild 把参数1的节点添加到父节点的最后。

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>   


var list=document.getElementById("list");
var lis=document.querySelectorAll("#list li");
                
var li=document.createElement('li');
li.innerHTML='我是要插入的内容';
var result=list.insertBefore(li,lis[6]);
console.log(result);    //返回第一个参数

11 删除节点 removeChild

removeChild 作用：删除节点

语法：

元素.removeChild(childNodes)

参数：
要删除的子节点（只能为单个节点）

返回值：
被删除的元素（参数）

注意：这个方法可以删除文本节点和注释节点

var color=document.getElementById("color");
var lis=document.querySelectorAll("#color li");

var result=color.removeChild(lis[lis.length-1]);
console.log(result);    //返回被删除的那个

12 替换节点replaceChild

replaceChild 作用:替换节点：用节点1替换节点2
语法：

父节点.replaceChild(node，childNode)

参数：
node 替换成的节点
childNode 被替换的节点

注意：

两个参数必须同时出现，不然会报错
如果两个参数有同一个父节点，那么会把第二个删除，并且把第一个的位置换到第二个节点的位置。

返回值：
返回被替换的那个元素（参数2）

 var color=document.getElementById("color");
var lis=document.querySelectorAll("#color li");
                
var newColor=document.createElement('li');
newColor.innerHTML='white';
 
 var result=color.replaceChild(lis[1],lis[3]);
console.log(result);    //被替换的那个元素（参数2）

13 克隆节点 cloneNode

cloneNode 作用：克隆节点

语法：

要被克隆的节点.cloneNode(Boolean)

参数：
true 克隆元素和元素包含的子节点
false 只克隆元素，不包含它的子节点
注意

如果没有参数，默认false
克隆的只有HTML CSS ，不克隆JS
如果克隆有ID的节点，克隆后的ID与被克隆的节点ID是一样的，要注意修改。

返回值：
返回被克隆的节点

cloneNode 可以克隆文本节点和注释

var box=document.getElementById("box");
var divs=box.children;
var spans=box.getElementsByTagName("span");
                
for(var i=0;i<spans.length;i++){
    spans[i].onclick=function(){
        alert(this.innerHTML);
    };
}
                
var newDiv=divs[0].cloneNode(false);//只克隆外层div
var newDiv=divs[0].cloneNode(true); //不光有外层标签，里面的子节点都会被克隆
newDiv.setAttribute('id','div2');
                
console.log(newDiv);
box.appendChild(newDiv);

14 元素操作的特性

appendChild/insertBefore/replaceChild在操作一个已有的元素时，是将已有的元素移动，而不是复制一份进行操作(剪切)

也就是说，元素在进行添加，插入，替换操作的时候，进行的是剪切操作

14 innerHTML与DOM方法的区别

innerHTML方法天花内容后，它先是把原来的内容清空，然后再把新的内容添加进来。所以原来的事件会被删除。
DOM方法只是在原来的基础上增加了一些元素，原来的事件还是存在的。

<ul id="color">
    <li>red</li>
    <li>green</li>
    <li>blue</li>
    <li>yellow</li>
    <li>pink</li>
</ul>


<script>
var color=document.getElementById("color");
var lis=document.querySelectorAll("#color li");
                
    for(var i=0;i<lis.length;i++){
        lis[i].onclick=function(){
            alert(this.innerHTML);
        };
    }
                
    //color.innerHTML+='<li>white</li>';
                
    var newColor=document.createElement('li');
    newColor.innerHTML='white';     //当使用innerHTML添加元素时，给lis添加的旧的点击事件不会触发
                
    color.appendChild(newColor);    //使用DOM方法添加元素时，，给lis添加的旧的点击事件还可以触发
</script>

15 getElementsByTagName 和 querySelectorAll

getElementsByTagName :

动态获取元素
一旦获取的元素有变化，那它就会重新获取一下，原来的索引就会变成新获取的

querySelectorAll :

不会动态获取元素
只获取一次，每个元素对应的下标是不会变的，即使元素有变化，它也不会重新再去获取，原来的下标不会变