lovecoding
/
Web1020


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
							<!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>
        .box span{
            color: red;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            display: inline-block;
        }
    </style>
</head>
<body>
    <!-- <div class="box1"></div>
    <div class="box1"></div> -->
    <div class="box">
        <span>hello</span>
        <span id="span-one">你好</span>
        <span>世界</span>
    </div>
    <span>world</span>
    <script>
        var oBox = document.getElementsByClassName("box")[0];
        // var firstSapn = document.getElementsByClassName("box")[0];
        var spanOne = document.getElementById("span-one");
        // 通过选择器选中内部子元素
        // firstSapn = firstSapn.getElementsByTagName("span")[0];
        // 通过节点获取子元素
        // firstSapn = firstSapn.firstChild;
        // 获取元素的子节点包含文本节点
        // firstSapn = firstSapn.childNodes;
        // 获取元素的子节点不包含文本节点 只有元素节点
        // firstSapn = firstSapn.children;
        // 获取元素的父节点
        // var oParent = spanOne.parentNode;

        // 获取元素的兄弟节点 获取前一个兄弟且是元素节点
        // var preElement = spanOne.previousElementSibling;
        // 获取元素的兄弟节点 获取前一个兄弟且饱含文本节点
        // var preElement = spanOne.previousSibling;
        // 获取元素的兄弟节点 获取后一个兄弟且是元素节点
        // var nextElement = spanOne.nextElementSibling;
        // 获取元素的兄弟节点 获取后一个兄弟且包含文本节点
        // var nextElement = spanOne.nextSibling;
        // console.log(nextElement);

        // 创建节点
        var oDiv = document.createElement("div");
        oDiv.innerText = "四福科技";
        oDiv.style.color = "red";

        // 插入节点
        // 向指定元素的末尾添加子元素
        // oBox.appendChild(oDiv);
        // 向指定元素的前面添加元素 两个参数第一个是添加的元素 第二个是添加到哪个元素的前面
        // oBox.insertBefore(oDiv,spanOne);
        oBox.replaceChild(oDiv,spanOne);
        // console.log(oDiv);
    </script>
</body>
</html>