Javascript----- DOM 练习题

最新推荐文章于 2023-03-17 17:39:28 发布

桃子耶耶

最新推荐文章于 2023-03-17 17:39:28 发布

阅读量625

点赞数 3

文章标签： javascript vue.js 开发语言学习

本文链接：https://blog.csdn.net/m0_46677484/article/details/126500094

版权

appendChild() insertBefore() remove() replaceChild()

appendChild()

insertBefore(要插入的节点,参考节点)

replaceChild(替换的节点,被替换的节点)

removeChild(删除的节点)

克隆节点

cloneNode(true) 深克隆克隆节点克隆节点内容节点的所有后代节点也都会被克隆,

cloneNode(false) 浅克隆只克隆该节点本身，不克隆节点内容

过滤元素节点

练习题

传输文件到阿里云

scp 文件绝对路径用户名@ip地址:目录

传输文件夹到阿里云

scp -r 文件夹绝对路径用户名@ip地址:目录

获取节点内部内容得方式和区别?

1.innerHTML;设别HTML代码片段

2.innerText;；只识别文本去除空格和回车

3.textContent;只识别文本，不去除空格和回车

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			margin-top: 10px;
			background-color: red;
		}
	</style>
<script>
window.onload=function(){
var body=document.body;
console.log(body.innerHTML);
			console.log(body.innerText);
			console.log(body.textContent);
			console.info(body.innerHTML);
			
		}
	</script>
</head>
<body>
	 hello



	<div>one</div>
	<div>two</div>
	<div>three</div>
	<!-- 我是一个注释注释 -->
	world
</body>
</html>

操作节点

四个方法都需要父节点对象进行调用!

appendChild() insertBefore() remove() replaceChild()

appendChild()

追加节点

1.获取到父节点
2.找到孩子
3.添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        width: 100px;
        height: 100px;
        margin-top: 10px;
        margin-left: 10px;
        background-color: rgb(31, 61, 196);
    }
</style>
<body>
    <div>one</div>
	<div>two</div>
	<div>three</div>

</body>
<script>
    window.onload=function(){
        // 1.找到父元素 
        var body=document.body;
        // 给body添加节点
        // 2.获取子元素
			var newChild=document.createElement('div');
			// 3.给子元素添加内容
			newChild.innerHTML='<p>four</p>';
			// 4.给父元素追加节点
			body.appendChild(