JavaScript——DOM

其他 2019-05-12 19:22:49 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/actionActivity/article/details/89839839

文章目录

DOM

DOM (Document Object Model) 浏览器已经为我们提供了文档节点对象，这个对象是 window 属性。可以在页面中直接使用，文档节点代表的是整个网页。

事件

事件就是用户和浏览器之间的一些交互行为。例如: 点击按钮、鼠标移动、关闭窗口
处理事件
我们可以在事件对应的属性中，设置一些 js 代码，这样当事件被触发时，js代码会执行。这种写法叫做结构和行为耦合，不方便维护不推荐使用。

<!-- 这样写不方便后期的维护 -->
<button onclick="alert('啊！我被点击了~~')">点我一下</button>

文档的加载

浏览器在加载一个页面时，是按照自上向下的顺序开始加载的，读取到一行就运行一行。
如果将 js 代码写到页面的上边，在代码执行的时候，页面还没有加载，DOM对象也没有加载，会导致无法获取到DOM 对象
解决办法 使用window.onload 来解决
onload 事件会在整个页面加载完成之后才会触发
为 window 绑定 onload 事件，该事件对应的响应函数会在页面加载完成之后执行，这样可以确保我们的代码在执行时所有的 DOM对象已经加载完毕了。

window.onload = function(){
	// 在这里编写你的 JS 代码...
};

DOM 查询

获取元素节点

document.getElementById()

通过 id 属性获取一个元素节点对象

<script>
    window.onload = function () {
    	var bnt = document.getElementById("btn");  // 通过 ID 来获取元素节点
    };
</script>

<body>
    <button id="btn">点我</button>
</body>
document.getElementsByTagName()

通过标签名获取一组元素节点对象，它返回的是个数组。

<script>
    window.onload = function () {
        var allA = document.getElementsByTagName("a");
        console.log("数组的长度为:" + allA.length);
    };
</script>

<body>
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.taobao.com">阿里</a>
    <a href="http://www.qq.com">腾讯</a>
</body>

运行结果
在这里插入图片描述

document.getElementsByName()

通过name属性值获取一组元素节点对象，返回的是一个数组。

<script>
    window.onload = function () {
        var hobby = document.getElementsByName("hobby");  // 根据 name 属性值来获取元素
        console.log("数组的长度为:" + hobby.length);
    };
</script>

<body>
    <form action="#">
        <input type="checkbox" name="hobby" value="zq">足球
        <input type="checkbox" name="hobby" value="lq">篮球
        <input type="checkbox" name="hobby" value="ymq">羽毛球
    </form>
</body>

运行结果
在这里插入图片描述

获取元素节点的子节点

getElementsByTagName()

获取当前节点的所有子节点，返回一个数组

<script>
    window.onload = function () {
        var box = document.getElementById("box");  // 获取 ID 为 box 的元素
        var allA = box.getElementsByTagName("a");  // 获取 box 下边所有的 <a> 标签
        console.log("数组的长度为:" + allA.length);
    };
</script>

<body>
    <div id="box">
        <a href="http://www.baidu.com">百度</a>
        <a href="http://www.qq.com">腾讯</a>
        <a href="http://www.taobao.com">阿里</a>
    </div>
</body>

运行结果
在这里插入图片描述

childNodes

获取当前节点的所有子节点。根据DOM 标准，标签间的空白也算是一个文本节点。
注意： 在IE8 及以下浏览器中，不会把空白当成子节点。

<script>
    window.onload = function () {
        var box = document.getElementById("box");
        var allA = box.childNodes;  // 获取 box 下边所有的子节点.
        console.log("数组的长度为:" + allA.length);
    };
</script>
<body>
    <div id="box">
        <a href="http://www.baidu.com">百度</a>
        <a href="http://www.qq.com">腾讯</a>
        <a href="http://www.taobao.com">阿里</a>
    </div>
</body>

运行结果
在这里插入图片描述
为什么是 7呢?
在这里插入图片描述

children

可以获取当前元素的所有子元素，它是不包含空白的。

<script>
    window.onload = function () {
        var box = document.getElementById("box");
        var allA = box.children; // 获取 box 下边所有的子元素
        console.log("数组的长度为:" + allA.length);
    };
</script>

<body>
    <div id="box">
        <a href="http://www.baidu.com">百度</a>
        <a href="http://www.qq.com">腾讯</a>
        <a href="http://www.taobao.com">阿里</a>
    </div>
</body>

运行结果
在这里插入图片描述

firstChild 和 lastChild

firstChild 可以获取当前元素的第一个子节点(包括空白区域)
lastChild 可以获取当前元素的最后一个子节点(包括空白区域)

    <script>
        window.onload = function () {
            var box = document.getElementById("box");
            var fc = box.children;   // 获取 box 下边第一个子节点.
            var lc = box.lastChild;  // 获取 box 下边最后一个子节点.
        };
    </script>
</head>

<body>
    <div id="box">
    	<!-- 我就不想获取空白的区域,可以写到一行 -->
        <a href="http://www.baidu.com">百度</a><a href="http://www.qq.com">腾讯</a><a href="http://www.taobao.com">阿里</a>
    </div>
</body>

获取父节点和兄弟节点

parentNode

获取当前元素的父节点(父元素)

<script>
    window.onload = function () {
        var p = document.getElementById("childNode");  // 获取 p 元素
        var myParent = p.parentNode;  // 获取我爸爸
    };
</script>

<body>
    <div id="box">
        <p id="childNode">我是子节点</p>
    </div>
</body>
previousSibling 和 nextSibling

previousSibling获取当前元素的前一个兄弟节点(哥哥节点)
nextSibling 获取当前元素的后一个兄弟节点(弟弟节点)

<script>
    window.onload = function () {
        //获取我的节点
        var my = document.getElementById("my");
        var previous = my.previousSibling;  // 获取哥哥节点
        var next = my.nextSibling;  // 获取弟弟节点
    };
</script>

<body>
    <p>哥哥节点</p>
    <p id="my">我节点</p>
    <p>弟弟节点</p>
</body>

DOM 查询的其他方法

document.body

获取 body 标签

window.onload = function(){
	var body = document.body;  // 获取 body 标签
	console.log(body);
};

运行结果
在这里插入图片描述

document.documentElement

获取 HTML 根标签

window.onload = function () {
	var html = document.documentElement; // 获取 html 根标签
	console.log(html);
};

运行结果
在这里插入图片描述

document.all

获取页面上的所有元素，相当于document.getElementsByTagName("*")

window.onload = function(){
	var all = document.all();  // 获取页面上的所有的元素
	console.log(all);
};

在这里插入图片描述

getElementsByClassName()

根据元素的 class 属性值查询一组元素节点对象，但是该方法不支持 IE8 及以下的浏览器。

<script>
    window.onload = function () {
        var ps = document.getElementsByClassName("p1"); // 获取所有class 为的 p1 的元素
        console.log("数组的长度为:" + ps.length);
    };
</script>

<body>
    <p class="p1">我是一个段落</p>
    <p class="p1">我是一个段落</p>
    <p class="p1">我是一个段落</p>
</body>

运行结果
在这里插入图片描述

document.querySelector()

需要一个选择器的字符串作为参数，可以根据一个CSS 选择器来选择一个元素节点对象
使用该方法总会选择唯一的一个元素，如果满足条件的元素有多个，它只会返回第一个.
支持 IE8 及以上的浏览器

<script>
    window.onload = function () {
        var fp = document.querySelector("#firstP");  // 通过选择器获取元素
        console.log(fp);
    };
</script>

<body>
    <p class="p1" id="firstP">我是一个段落</p>
    <p class="p1">我是一个段落</p>
    <p class="p1">我是一个段落</p>
</body>

运行结果
在这里插入图片描述

document.querySelectotAll()

该方法和querySelector()方法用法一样，不同的是，它会将符合条件的元素封装到一个数组中返回。即使符合条件的元素只有一个，也会返回一个数组。

<script>
    window.onload = function () {
        var fp = document.querySelectorAll(".p1");  // 通过选择器获取元素
        console.log(fp);
    };
</script>

<body>
    <p class="p1" id="firstP">我是一个段落</p>
    <p class="p1">我是一个段落</p>
    <p class="p1">我是一个段落</p>
</body>

运行结果
在这里插入图片描述

DOM 增删改操作

document.createElement()

用于创建一个节点，需要一个标签名作为参数，将会根据标签名创建元素节点对象，并将创建好的对象作为返回值返回。

<script>
    window.onload = function () {
        // 获取到 btn01
        var btn01 = document.getElementById("btn01");
        // 添加点击事件
        btn01.onclick = function(){
            // 创建一个节点
            var p = document.createElement("p");
            console.log(p);
        };
    };
</script>

<body>
    <button id="btn01">创建一个节点</button>
</body>

运行结果
在这里插入图片描述

document.createTextNode()

可以用来创建一个文本节点对象，需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回。

<script>
    window.onload = function () {
        // 获取到 btn01
        var btn01 = document.getElementById("btn01");
        // 添加点击事件
        btn01.onclick = function(){
            // 创建一个文本节点
            var txt = document.createTextNode("我是一个文本节点");
            console.log(txt);
        };
    };
</script>

<body>
    <button id="btn01">创建一个文本节点</button>
</body>

运行结果
在这里插入图片描述

appendChild()

向一个父节点中添加一个新的子节点父节点.appendChild(子节点);

<script>
    window.onload = function () {
        // 获取到 btn01
        var btn01 = document.getElementById("btn01");
        // 添加点击事件
        btn01.onclick = function () {
            // 创建一个 p 标签
            var p = document.createElement("p");
            // 创建一个文本节点
            var txt = document.createTextNode("我是新创建p标签中的内容...");
            // 把文本节点添加到 p 标签中
            p.appendChild(txt);
            // 把 p 标签添加到 body 中
            var body = document.body; // 获取body
            body.appendChild(p);
        };
    };
</script>

<body>
    <button id="btn01">创建一个p标签</button>
</body>

点击按钮以后，就会创建一个 p 元素
在这里插入图片描述
在这里插入图片描述

removeChild()

删除一个子节点 父节点.removeChild(子节点);

<script>
    window.onload = function () {
        // 获取到 btn01
        var btn01 = document.getElementById("btn01");
        // 添加点击事件,删除第三个子节点
        btn01.onclick = function () {
            //获取第三个子节点
            var node = document.getElementsByTagName("li")[2];
            // 获取父节点
            var ul = document.getElementById("uls");
            ul.removeChild(node); // 删除子节点
        };
    };
</script>

<body>
    <button id="btn01">删除一个子节点</button>
    <ul id="uls">
        <li>我是第一个子节点</li>
        <li>我是第二个子节点</li>
        <li>我是第三个子节点</li>
        <li>我是第四个子节点</li>
    </ul>
</body>

运行结果
在这里插入图片描述

replaceChild()

可以使用指定的子节点来替换已有的子节点 父节点.replaceChild(新节点,旧节点);

<script>
    window.onload = function () {
        // 获取到 btn01
        var btn01 = document.getElementById("btn01");
        // 添加点击事件
        btn01.onclick = function () {
            // 获取p标签
            var p = document.getElementById("pNode");
            // 获取父节点
            var body = document.body;

            //创建一个新的节点，用于替换旧节点
            var a = document.createElement("a");
            var txt = document.createTextNode("我是新的节点 a 哦~");
            a.appendChild(txt);

            // 替换节点
            body.replaceChild(a, p);
        };
    };
</script>

<body>
    <button id="btn01">替换子节点</button>
    <p id="pNode">我是旧节点 p </p>
</body>

运行结果
在这里插入图片描述
点击按钮以后
在这里插入图片描述

insertBefore()

可以在指定的子节点前插入一个新的子节点父节点.insertBefore(新节点,旧节点);

<script>
    window.onload = function () {
        // 获取到 btn01
        var btn01 = document.getElementById("btn01");
        // 添加点击事件
        btn01.onclick = function () {
            // 获取p标签
            var p = document.getElementById("pNode");
            // 获取父节点
            var body = document.body;

            //创建一个新的节点，用于插入到 p 元素前面
            var a = document.createElement("a");
            var txt = document.createTextNode("我是新的节点 a 哦~");
            a.appendChild(txt);

            // 插入一个新的节点 a 
            body.insertBefore(a, p);

        };
    };
</script>

<body>
    <button id="btn01">替换子节点</button>
    <p id="pNode">我是旧节点 p </p>
</body>

运行结果
在这里插入图片描述
点击按钮以后
在这里插入图片描述

DOM 操作 CSS 样式

读取和修改内联样式

使用 JS 来修改元素的样式
语法： 元素.style.样式名 = 样式值
注意： 如果 CSS 样式名中含有 - 这种名称在JS 中是不合法的，例如： background-color
我们需要将这种样式名，修改为 驼峰命名法backgroundColor

  • 通过 style 属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS 修改的样式往往会立即显示。
  • 但是如果在样式中写了 !important 则此时样式会有最高的优先级，即使通过 JS 也不能覆盖这个样式。此时将会导致 JS 修改的样式失效，所以尽量 不要给样式添加 !important
  • 通过 style 读取和设置的都是内联样式、无法读取样式表中的样式。
<style>
	/* 设置一个基本的样式 */
    #box{
        width: 100px;  
        height: 100px;
        background-color: darkcyan;
    }
</style>
<script>
    window.onload = function () {
        // 获取到 btn01
        var btn01 = document.getElementById("btn01");
        // 添加点击事件
        btn01.onclick = function () {
            // 获取 box
            var box = document.getElementById("box");
            box.style.width = "150px";  // 修改宽度
            box.style.height = "150px";  // 修改高度
            box.style.backgroundColor = "deeppink";  // 修改背景颜色
        };
    };
</script>

<body>
    <button id="btn01">更换样式</button>
    <br>
    <br>
    <div id="box"></div>
</body>

运行结果
在这里插入图片描述

读取元素当前显示的样式

语法：元素.currentStyle.样式名 仅支持 IE 8
可以用来读取当前元素正在显示的样式，如果当前元素没有设置该样式，则获取默认值。

在其他浏览器中可以使用 getComputedStyle() 这个方法来获取元素当前的一个样式.这个方法是 window 的方法，可以直接使用.
getComputedStyle()需要两个参数
1. 要获取样式的元素
2. 可以传递一个伪元素，一般都传 null
该方法会返回一个 对象，对象中封装了当前元素的样式，可以通过对象.样式名来读取样式。如果获取的样式没有设置，则会获取到真实的值，而不是默认值。

  • 例如：没有设置 width，则不会获取 auto，而会返回一个具体的 宽度

注意：通过currentStyle 和 getComputedStyle()读取到的样式都是只读的，不可以修改，如果要修改必须通过 style 属性

为了兼容 IE8 和其他浏览器一般会写一个方法用来返回当前的样式

/* 
	定义一个函数，来返回当前的样式 
	参数
		1. 需要获取样式的元素
		2. 元素的名称  例如：width  height ....
*/
function getStyle(obj,name){
	// 如果有这个属性则代表是 正常浏览器
	if(window.getComputedStyle){
		// 正常浏览器
		return getComputedStyle(obj,null)[name];
	}else{
		//IE 8 及以下浏览器
		return 	obj.currentStyle[name];
	}
}

例子:

<style>
    #box {
        width: 100px;
        height: 100px;
        background-color: darkcyan;
    }
</style>
<script>
window.onload = function () {
     function getStyle(obj, name) {
         // 如果有这个属性则代表是 正常浏览器
         if (window.getComputedStyle) {
             // 正常浏览器
             return getComputedStyle(obj, null)[name];
         } else {
             //IE 8 及以下浏览器
             return obj.currentStyle[name];
         }
     }

    var btn01 = document.getElementById("btn01");  // 获取按钮
    var box = document.getElementById("box"); // 获取 box 元素

	// 为按钮添加事件
    btn01.onclick = function () {
        // 获取 box 元素当前显示的宽度
        var width = getStyle(box, "width");
        alert(width);
    };

};
</script>

<body>
    <button id="btn01">获取box的样式</button>
    <br>
    <br>
    <div id="box"></div>
</body>

运行结果
在这里插入图片描述

其他样式相关的属性

这些属性都是不带 px 的，返回的都是一个数字，可以直接进行计算。
这些属性都是只读的，不可以修改

clientWidth 和 clientHeight

clientWidth 和 clientHeight 这两个属性可以获取元素的可见宽度和高度
可以获取到元素宽度和高度，包括内容区和内边距

<style>
    #box {
        width: 100px;
        height: 100px;
        padding: 10px;  /* 设置内边距为10 */
        background-color: darkcyan;
    }
</style>
<script>
    window.onload = function () {
        var btn01 = document.getElementById("btn01");
        var box = document.getElementById("box"); // 获取 box 元素

        btn01.onclick = function () {
            // 获取元素的可见宽度和高度
            var width = box.clientWidth;
            var height = box.clientHeight;
            console.log("元素的可见宽度为：" + width);
            console.log("元素的可见高度为：" + height);
        };

    };
</script>

<body>
    <button id="btn01">获取元素的可见宽度和高度</button>
    <br>
    <br>
    <div id="box"></div>
</body>

运行结果
在这里插入图片描述

offsetWidth 和 offsetHeight

offsetWidth和 offsetHetght可以获取到元素的整个宽度和高度，包括内容区、内边距、边框

<style>
    #box {
        width: 100px;
        height: 100px;
        padding: 10px;
        border: 10px solid deeppink;
        background-color: darkcyan;
    }
</style>
<script>
    window.onload = function () {
        var btn01 = document.getElementById("btn01");
        var box = document.getElementById("box"); // 获取 box 元素

        btn01.onclick = function () {
            // 获取元素的可见宽度和高度
            var width = box.offsetWidth;
            var height = box.offsetHeight;
            console.log("元素的整个宽度为：" + width);
            console.log("元素的整个高度为：" + height);
        };

    };
</script>

<body>
    <button id="btn01">获取元素的宽度和高度</button>
    <br>
    <br>
    <div id="box"></div>
</body>

运行结果
在这里插入图片描述

offsetParent

用来获取当前元素的定位父元素(开启了定位的父元素)

  • 会获取到距离当前元素最近开启了定位的祖先元素。
  • 如果所有的祖先元素都没有开启定位，则返回body
<style>
    #box {
        width: 100px;
        height: 100px;
        background-color: darkcyan;
        position: relative;
    }

    #box1 {
        width: 50px;
        height: 50px;
        background-color: deeppink;
    }
</style>
<script>
    window.onload = function () {
        var btn01 = document.getElementById("btn01");
        var box1 = document.getElementById("box1"); // 获取 box1 元素

        btn01.onclick = function () {
            // 获取距离我开启了定位的父元素
            var myParent = box1.offsetParent;
            console.log(myParent);
        };

    };
</script>

<body>
    <button id="btn01">获取距离我开启了定位的父元素</button>
    <br>
    <br>
    <div id="box">
        <div id="box1"></div>
    </div>
</body>

运行结果
在这里插入图片描述

offsetTop 和 offsetLeft

offsetTop 获取当前元素相对于定位元素的垂直偏移量
offsetLeft 获取当前元素相对于定位元素的水平偏移量

<style>
    * {
        padding: 0;
        margin: 0;
    }

    #box {
        width: 100px;
        height: 100px;
        background-color: darkcyan;
        position: absolute;
    }
</style>
<script>
    window.onload = function () {
        var btn01 = document.getElementById("btn01");
        var box = document.getElementById("box"); // 获取 box 元素

        btn01.onclick = function () {
            // 获取偏移量
            var top = box.offsetTop;
            var left = box.offsetLeft;
            console.log("顶部的偏移量为:" + top);
            console.log("左侧的偏移量为:" + left);
        };

    };
</script>

<body>
    <button id="btn01">获取偏移量</button>
    <div id="box"></div>
</body>

运行结果
在这里插入图片描述
在这里插入图片描述

scrollWidth 和 scoreHeight

scrollWidth 和 scrollHeight可以获取元素整个滚动区域的宽度和高度

<style>
    * {
        padding: 0;
        margin: 0;
    }

    #box {
        width: 200px;
        height: 200px;
        margin: 50px auto;
        background-color: darkcyan;
        overflow: auto;
    }
</style>
<script>
    window.onload = function () {
        var btn01 = document.getElementById("btn01");
        var box = document.getElementById("box"); // 获取 box 元素

        btn01.onclick = function () {
        	// 获取滚动区域的宽度和高度
            var sWidth = box.scrollWidth;
            var sHeight = box.scrollHeight;
            console.log("滚动区域的宽度为:" + sWidth);
            console.log("滚动区域的高度为:" + sHeight);
        };

    };
</script>

<body>
    <button id="btn01">获取滚动区域的宽度和高度</button>
    <br>
    <br>
    <div id="box">
        <p>
            欲将沉醉换悲凉，清歌莫断肠。这混乱的尘世，究竟充斥了多少绝望和悲伤。你想去做一个勇敢的男子，为爱，为信仰，轰轰烈烈的奋斗一场。你周身充斥着无人可比的灵气和光芒。你有着与伟人比肩的才气和名声，你是那样高傲孤洁的男子。你的一寸狂心未说，已经几度黄昏雨。
        </p>
    </div>
</body>

运行结果
在这里插入图片描述在这里插入图片描述

scrollTop 和 scrollLeft

scrollTop 可以获取垂直方向滚动条滚动的距离
scrollLeft 可以获取水平方向滚动条滚动的距离

<style>
    * {
        padding: 0;
        margin: 0;
    }

    #box {
        width: 200px;
        height: 200px;
        margin: 50px auto;
        background-color: darkcyan;
        overflow: auto;
    }
</style>
<script>
    window.onload = function () {
        var btn01 = document.getElementById("btn01");
        var box = document.getElementById("box"); // 获取 box 元素

        btn01.onclick = function () {
        	// 获取滚动条滚动的距离
            var st = box.scrollTop;
            var sl = box.scrollLeft;
            console.log("垂直方向滚动条滚动的距离为:" + st);
            console.log("水平方向滚动条滚动的距离为:" + sl);
        };

    };
</script>

</head>

<body>
    <button id="btn01">获取滚动区域的宽度和高度</button>
    <br>
    <br>
    <div id="box">
        <p>
            欲将沉醉换悲凉，清歌莫断肠。这混乱的尘世，究竟充斥了多少绝望和悲伤。你想去做一个勇敢的男子，为爱，为信仰，轰轰烈烈的奋斗一场。你周身充斥着无人可比的灵气和光芒。你有着与伟人比肩的才气和名声，你是那样高傲孤洁的男子。你的一寸狂心未说，已经几度黄昏雨。
        </p>
    </div>
</body>

运行结果
在这里插入图片描述在这里插入图片描述

判断滚动条滚动到底
scrollHeight - scrollTop == clientHeight;  // 说明垂直方向的滚动条滚动到底了。
scrollWidth - scrollLeft == clientWidth;  // 说明水平方向的滚动条滚动到底了。

猜你喜欢

转载自blog.csdn.net/actionActivity/article/details/89839839
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022