DOM补充及节点

最新推荐文章于 2023-01-06 08:50:49 发布

发臭的靈魂

最新推荐文章于 2023-01-06 08:50:49 发布

阅读量276

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_38256266/article/details/118093966

版权

前端专栏收录该内容

63 篇文章 17 订阅

订阅专栏

DOM补充及节点

一、DOM补充

1、获取页面滚动距离

scrollTop

//兼容写法
var oTop = document.body.scrollTop ||document.documentElement.scrollTop;

//结合onscroll 使用
window.onscroll = function(){
     var oTop = document.body.scrollTop ||document.documentElement.scrollTop;
     console.log(oTop);
}

经典案例

//顶部悬浮
var oNav = document.getElementById('navBar')
      // 滚出去的高度大于头部的高度180px时，让导航栏固定
      // 页面滚动触发 
window.onscroll = function () {
       //获取滚出去的距离
       var top=document.body.scrollTop || document.documentElement.scrollTop;
       console.log(top);
            
       if (top >= 180) {
           oNav.className = 'fixed';
       }else{
           oNav.className = '';
       }
}

2、自定义属性

设置自定义属性

 元素.setAttribute('属性名','属性值')

var oDiv = document.querySelector('div')
oDiv.setAttribute('a','b') //设置属性a,值为b
oDiv.setAttribute('class','box') //设置类名为box

获取自定义属性
```
 元素.getAttribute('属性名')
```

//根据属性名获取
console.log(oDiv.getAttribute('class'))//获取属性为class

删除自定义属性
```
 元素.removeAttribute('属性名')
```

//根据属性名删除
oDiv.removeAttribute('class') //删除属性名为class的

二、节点

1、概念

网页中所有内容都是节点，包括标签, 属性, 文本, 注释等，其中文本包括文字，空格，换行。

2、获取节点

firstChild：第一个孩子
lastChild：最后一个孩子
nextSibling：兄弟节点
previousSibling：前一个兄弟节点
parentNode:父节点 
parentElementtNode

childNodes: 获取所有的孩子（包括所有类型节点）
children: 只获取元素节点

 firstElementChild： 获取第一个标签子节点
 nextElementSibling  下一个标签节点
 previousElementSibling   前一个标签节点

3、节点操作

尾部追加节点
```
 父节点.appendChild(子节点)
```

其他位置插入节点

 父节点.insertBefore(新节点,位置);

删除节点

 元素.remove()     适合和删除按钮有一定层级关系 
 父元素.removeChild(移除的节点)   适合没有层级关系

经典案例

<body>
    <button onclick="add_bef()">从头增加</button>
    <button onclick="add_last()">从后增加</button>

    <button onclick="rem()">删除节点</button>
    <button onclick="rep()">替换节点</button>
    <ul>
        <li>123</li>
        <li class="hu">456</li>
        <li>789</li>
        <li>000</li>
        <!-- 九九 -->
    </ul>
</body>

oUl = document.querySelector('ul');

    //从头增加
    function add_bef(){
        var oLi = document.createElement('li');
        oLi.innerHTML = '从头增加';
        oUl.appendChild(oLi);
        oUl.insertBefore(oLi,oUl.firstElementChild);

    }
	
	// 从后追加
    function add_last(){
        var oLi = document.createElement('li');
        oLi.innerHTML = '从后增加';
        oUl.appendChild(oLi);
    }

    //删除
    function rem(){
        oUl.removeChild(oUl.lastElementChild);
    }
    
    //替换
    function rep(){
        var oP = document.createElement('li');
        oP.innerHTML = '替换的li';
        oUl.replaceChild(oP,oUl.lastElementChild);
    }

4、节点类型

nodeType

返回节点类型

var oUl = document.querySelector('ul')
// nodeType节点类型：获取的是一个数字
// 获取一个元素节点
var oEle = oUl.firstElementChild; //获取元素节点
console.log(oEle.nodeType); // 元素节点li 的节点类型是1

// 获取属性节点
var oAttr =  oEle.getAttributeNode('class');//获取名叫class的属性
console.log(oAttr.nodeType);//2

// 文本节点
var oText = oUl.lastChild;
console.log(oText.nodeType);

// 注释节点
var oComment = oUl.lastChild.previousSibling;
console.log(oComment.nodeType);//8

元素节点 1
属性节点 2
文本节点 3
注释节点 8
文档节点 9

三、获取非行内样式

getComputedStyle(元素,null)[‘属性名’] ;

// 获取
window.getComputedStyle(oDiv,null)['width'] ;// 获取div的非行间样式;
console.log(window.getComputedStyle(oDiv,null)['width']); // IE低版本不支持

元素.currentStyle[‘属性名’]

IE兼容写法（获取非行间样式）

//封装函数
//获取非行间样式(行间样式也能获取)
function getStyle(elem,attr){
    if(elem.currentStyle){
        return elem.currentStyle[attr];
    }else{
        return window.getComputedStyle(elem,null)[attr];
    }
}

四、排他思想

消灭所有人，再留下自己

经典案例

<body>
    <input type="button" value="点击变色">
    <input type="button" value="点击变色">
    <input type="button" value="点击变色">
    <input type="button" value="点击变色">
    <input type="button" value="点击变色">
    <input type="button" value="点击变色">
    <input type="button" value="点击变色">
    <input type="button" value="点击变色">
    <input type="button" value="点击变色">
    <input type="button" value="点击变色">
    <input type="button" value="点击变色">
    <input type="button" value="点击变色">
    <input type="button" value="点击变色">

</body>

// 点哪个按钮，哪个按钮亮
var oInp = document.getElementsByTagName('input')
    //循环绑定点击事件
    for (var i=0;i<oInp.length;i++){
        oInp[i].onclick = function(){

            console.log(i);           
            for(var j=0;j<oInp.length;j++){
                //先把所有input背景色为空
                oInp[j].style.backgroundColor = '';
                console.log(j);                
            }
            this.style.backgroundColor = 'greenyellow';
        }
    }

经典案例

<body>
    <input type="button" value="新闻">
    <input type="button" value="娱乐">
    <input type="button" value="社交">

    <div>新闻</div>
    <div>娱乐</div>
    <div>社交</div>


</body>

// 点哪个弹出对应div
var oIpt = document.querySelectorAll('input');
    var oDiv = document.querySelectorAll('div');

    for (var i = 0; i < oIpt.length; i++) {
        oIpt[i].index = i;
        oIpt[i].onclick = function () {
            for (var j = 0; j < oIpt.length; j++) {
                oIpt[j].style.backgroundColor = '';
                oDiv[j].style.display = 'none';

            }
            this.style.backgroundColor = 'green';
            oDiv[this.index].style.display = 'block';
        }
    }

发臭的靈魂

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM补充及节点

DOM补充及节点一、DOM补充二、节点三、获取非行内样式四、排他思想一、DOM补充1、获取页面滚动距离scrollTop//兼容写法var oTop = document.body.scrollTop ||document.documentElement.scrollTop;//结合onscroll 使用window.onscroll = function(){ var oTop = document.body.scrollTop ||document.documentElem
复制链接

扫一扫