B3-DOM节点

最新推荐文章于 2024-10-18 17:51:23 发布

Leona__

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量81

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/Leona__/article/details/120138640

版权

节点类型

1.文档节点
2.元素节点
3.属性节点
4.文本节点
5.注释节点

节点关系

属性名（.属性）	描述
parentNode	返回节点的父节点
childNodes	返回节点的所有子节点（数组集合）

属性名（包括文本节点）	属性名（不包括文本节点）	描述
firstChild	firstElementChild	返回第一个子节点
lastChild	lastElementChild	返回最后一个子节点
nextSibling	nextElementSibling	下一个节点
previousSibling	perviousElementSibling	上一个节点

节点属性

节点	节点类型（nodeType）	节点名称（nodeName）	节点值（nodeValue）
文档	9	#document	-
元素	1	元素名称	-
属性	2	属性名称	属性值
文本	3	#text	文本内容
注释	8	-	-

节点操作

节点属性操作

方法	描述
getAttribute（“属性名”）	获取属性的值
setAttribute （“属性名”，“属性值”）	用来设置属性的值
removeAttribute（“属性名”）	删除属性

节点状态操作

方法	描述
document.createElement（“标签名”）	新建一个标签
A.cloneNode(true/false)	复制A节点 true:复制该节点及其全部子节点 false:只复制该节点及其属性
A.appendChild（B）	把B节点添加到A节点的末尾
父节点.insertBefore（A,B）	把A节点插在B节点之前
父节点.removeChild（A）	删除A节点
父节点.replaceChild（new,old）	使用新节点替换旧节点

节点样式

设置
使用className设置
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .divClass{
            width: 100px;
            height: 100px;
            background-color: brown;
        }
    </style>
</head>
<body>
    <div></div>
    <input type="button" value="点我显示div">
</body>
</html>
<script>
    document.getElementsByTagName("input")[0].onclick = function(){
        document.getElementsByTagName("div");[0].className = "divClass";
    }
</script>

样式如下：
在这里插入图片描述
点击按钮后：

修改
使用-----节点.style.属性=“值”------设置
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .divClass{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <input type="button" value="点我更改div颜色">
</body>
</html>
<script>
    document.getElementsByTagName("div")[0].className = "divClass";

    document.getElementsByTagName("input")[0].onclick = function(){
        document.getElementsByTagName("div")[0].style.backgroundColor = "black";
    }
</script>

样式如下：
在这里插入图片描述
点击按钮后：

获取
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .divClass{
            width: 100px;
            height: 100px;
            background-color: rgb(255, 192, 203);
        }
    </style>
</head>
<body>
    <div></div>
    <input type="button" value="点我显示div颜色">
</body>
</html>
<script>
    var oDiv = document.getElementsByTagName("div")[0];
    oDiv.className = "divClass";
    document.getElementsByTagName("input")[0].onclick = function(){
    	document.write(document.defaultView.getComputedStyle(oDiv,null).backgroundColor);
    	//由于兼容问题，IE使用以下代码：
    	//oDiv.currentStyle.backgroundColor
    }
</script>

样式如下：
在这里插入图片描述
点击按钮后：

示例

示例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <input type="radio" name="like" value="dog">狗狗<br/>
        <input type="radio" name="like" value="mai">霾霾<br/>
        <img id="pic">
    </form>
</body>
</html>
<script>
    var like = document.getElementsByName("like");
    var pic = document.getElementById("pic");
    for(var i = 0;i < like.length;i++){
        like[i].i = i;
        like[i].onclick = function(){
            var srcRood = like[this.i].value;
            pic.setAttribute("src",srcRood + ".jpg")
        }
    }
</script>

样式如下：
在这里插入图片描述

示例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <input type="checkbox" name="hob" id="" value="唱歌">唱歌<br/>
        <input type="checkbox" name="hob" id="" value="跳舞">跳舞<br/>
        <input type="checkbox" name="hob" id="" value="游泳">游泳<br/>
        <input type="checkbox" name="hob" id="" value="乒乓球">乒乓球<br/>
        <input type="checkbox" name="hob" id="" value="羽毛球">羽毛球<br/>
        <input type="checkbox" name="hob" id="" value="打游戏">打游戏<br/>
        <input id="but" type="button" value="显示爱好">
    </form>
    <div id="show"></div>
</body>
</html>
<script>
    var hob = document.getElementsByName("hob");
    var show = document.getElementById("show");
    var but = document.getElementById("but");
    but.onclick = function(){
        show.innerHTML= ""
        for(var i = 0;i < hob.length;i++){
            //选中的多选框
            if(hob[i].checked){
                show.innerHTML += hob[i].value + "<br/>"
            }
        }
        
    }
</script>

样式如下：
在这里插入图片描述
示例3
广告跟随滑动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #main{
            text-align:center; 
            width:1014px; 
            margin: 0 auto;
        }
        #adver{
            position:absolute;
            left:10px;
            top:30px;
            z-index:2;
            transition: all 0.3s ease-out;
        }
    </style>
</head>
<body>
	//左侧广告
    <div id="adver">
        <img src="../示例04：随鼠标滚动的广告图片/images/adv.jpg"/>
    </div>
    //右侧网页内容
    <div id="main">
        <img src="../示例04：随鼠标滚动的广告图片/images/main1.jpg"/>
        <img src="../示例04：随鼠标滚动的广告图片/images/main2.jpg"/>
        <img src="../示例04：随鼠标滚动的广告图片/images/main3.jpg"/>
    </div>
</body>
</html>
<script>
	//获取广告位置
    var oAdver = document.getElementById("adver");
   	//获取广告的top属性的值
    var oAdverTop = document.defaultView.getComputedStyle(adver,null).top;
	//点击时关闭广告
    oAdver.onclick = function(){
        oAdver.style.display = "none"
    }
    //滑动滑块时，
    window.onscroll = function(){
    	//获取滑块滚动高度
        var scoll = document.documentElement.scrollTop||document.body.scrollTop;
        //重新赋值广告top属性的值
        var oTop = (parseInt(oAdverTop) + scoll) + "px";
        oAdver.style.top = oTop;
    }
</script>