前端WEB-API 第四天-- 操做DOM 与 动态建立 DOM

时间  2019-12-04
标签 前端 web api 第四 dom 动态 建立 栏目 HTML 繁體版
原文   原文链接

错误拼接代码演示

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body id="dv">
	<script type="text/javascript">

		var newArr = '<ul>';
		for(var i=0; i<10; i++){
			newArr +='<li>' + '</li>';
		}
		newArr +='</ul>';
		// 在页面中找到第0 个 li 标签
		var li = document.querySelector('li');
		var anthor = document.createElement('a');

		anthor.innerHTML = '连接';
		anthor.href = '#';

		//这里 会报错 由于 找不到 li
		li.appendChild(anthor); 
		var dv = document.querySelector('#dv');
		dv.innerHTML = newArr;


	</script>
</body>
</html>
复制代码

正确演示

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body id="dv">
	<!-- 由于body 里面存在了 script 标签会被覆盖因此 咱们要在下面
	增长一个 新的容器  -->
	
	<div id="dv"></div>
	<script type="text/javascript">

		var newArr = '<ul>';
		for(var i=0; i<10; i++){
			newArr +='<li>' + '</li>';
		}
		newArr +='</ul>';

		var dv = document.querySelector('#dv');
		dv.innerHTML = newArr;


		// 在页面中找到第0 个 li 标签
		var li = document.querySelector('li');
		var anthor = document.createElement('a');

		anthor.innerHTML = '连接';
		anthor.href = '#';

		//这里 会报错 由于 找不到 li
		li.appendChild(anthor); 
		
	</script>
</body>
</html>
复制代码

页面建立添加一个新元素

如何插入(insert) 元素
    语法：
        父元素：insertBefore(新元素)
    含义：
        将'新元素' 插入到 页面年终的元素的 前面

    
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="dv">
    <p>111</p>
    <p class="target">222</p>
    <p>333</p>
  </div>
</body>
<script>
  //   语法：
  // 父元素 .insertBefore(新元素，页面中的元素)
  //   单词：target：目标
  //   一、建立元素
  //   二、插入到页面上

  var p = document.createElement('p');
  p.innerHTML = "我是一个被建立出来的新标签";
  var parent = document.querySelector('.dv');
  var target = document.querySelector('.target');
  parent.insertBefore(p, target)
  //   技术点 获取父元素 和页面中的元素 新元素是建立出来的，不可使用字符串
  

</script>

</html>

元素只有向前插入没有向后插入的一说 谨记
复制代码

移除remove 元素

语法 ：
    父元素. removeChild(子元素)；
含义：
    从父元素中删除子元素


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="dv">
    <p>111</p>
    <p class="target">222</p>
    <p>333</p>
  </div>
</body>
<script>
  //  语法 
  //   父元素.removeChild(子元素)
  // 获取父元素与你须要移除的子元素
  // 调用方法移除

  var parent = document.querySelector('.dv');
  var target = document.querySelector('.target');
  parent.removeChild(target);

</script>
</html>
复制代码

replace使用替换

父元素.replace('替换元素'，'父元素')；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="dv">
    <p>111</p>
    <p class="target">222</p>
    <p>333</p>
  </div>
</body>
<script>
  var p = document.createElement('p');
  p.innerText = "这里是替换的";
  var dv = document.querySelector('.dv');
  var target = document.querySelector('.target');

  dv.replaceChild(p, target);

</script>

</html>
复制代码

标签插入 与 cloneNode 重要

cloneNode 与移动DOM 元素  重要
    元素.cloneNode()
    拷贝该元素，并返回该元素
    
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div class="dv">
    <p>111</p>
    <p>222</p>
    <p>333</p>
  </div>
</body>
<script>
  var a = document.createElement('a')
  a.innerHTML = '建立a标签';
  a.href = "#";

  var dv = document.querySelector('.dv');
  //   dv.children[0].appendChild(a);
  // 这时候你就会发现 a从零标签一进到了 a标签，由于每一个元素只能有一个父节点
  dv.children[1].appendChild(a);

</script>

</html>

元素.cloneNOde(true)
拷贝该元素，机器全部的后代元素，并返回 ，要是不添加true 的话就不会拷贝子元素
元素中若是绑定了事件，cloneNode是不会拷贝事件


  var dv = document.querySelector('.dv');
  dv.children[0].appendChild(a);
  // 这时候你就会发现 a从零标签一进到了 a标签，由于每一个元素只能有一个父节点
  dv.children[1].appendChild(a.cloneNode(true));
复制代码

得到计算属性 样式操做 重要 重要 重要

得到计算属性 样式操做
style  只能处理行内样式，没法处理嵌入样式
点击一下 盒子 像右移动100 px
若是第一次获取元素的样式值的时候，样式不是行内样式，是写在外部的就没法使用style获取

应该使用计算样式 ！！！ 
window.getcomputedStyle(元素)；
该方法会返回这个元素的 全部计算样式的对象

细节：
写css 的规则是：
先写定位在写尺寸，在写位置，在写尺寸，在写边框

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box {
      position: absolute;
      left: 100px;
      top: 100px;
      border: 1px solid pink;
      width: 100px;
      height: 100px;
    }

  </style>
</head>

<body>
  <button>点击</button>
  <div class="box"></div>
</body>
<script>
  var btn = document.querySelector('button');
  btn.onclick = function () {
    // 要让盒子 向右移动就须要给盒子的left + 上一个数字
    // 全部就须要先得到盒子原有的left 值

    var box = document.querySelector('.box');
    var left = box.style.left || window.getComputedStyle(box).left;
    
    // var left = box.style.left || window.getcomputedStyle(box)
    // 这里 显示的总体的css
    console.log(left)
    
    left = parseInt(left);
    left += 100;
    left += 'px';
    console.log(left)
    // 赋值回去
    box.style.left = left


  }

</script>

</html>
复制代码

DEmo 在输入框 进行添加数字 +

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <input type="text" value="0"><button>+</button>

</body>
<script>
  // 1找到按钮
  var btn = document.querySelector('button');
  var txt = document.querySelector('input');

  //   二、在事件处理函数中要去除文本框中的数字，先转换 而后加完在赋值回去
  btn.onclick = function () {
    var num = txt.value //取出来的是字符串
    num = num - 0;
    num++;
    txt.value = num;
  }
  // 三、因为咱们须要频繁的  进行点击行为，全部咱们将文本框在外面获取

</script>

</html>
复制代码

Demo 咱们现实实现 加减购物车

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <button class="sub">-</button>
  <input type="text" value="0">
  <button class="add">+</button>
</body>
<script>
  var sub = document.querySelector('.sub')
  var add = document.querySelector('.add')
  var txt = document.querySelector('input')

  // 减法的方式
  sub.onclick = function () {
    var num = txt.value;
    parseInt(num);
    num--;
    txt.value = num
    if (num <= 0) {
      txt.value = 0;
    }

  }
  //   加法的方式
  add.onclick = function () {
    var num = txt.value;
    num - 0;
    num++;
    txt.value = num;
  }

</script>

</html>
复制代码

拼接字符串

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- 拼接字符串必定要有一个盒子 -->
  <div class="dv"></div>
</body>
<script>
  var data = [{
      txt: 'js',
      url: 'www.MEN.com'
    },
    {
      txt: 'js',
      url: 'www.MEN.com'
    },
    {
      txt: 'js',
      url: 'www.MEN.com'
    },
    {
      txt: 'js',
      url: 'www.MEN.com'
    },
    {
      txt: 'js',
      url: 'www.MEN.com'
    }
  ]

  var html = '<ul>';
  for (var i = 0; i < data.length; i++) {
    html += '<li><a href="' + data[i].url + '"> ' + data[i].txt + '</a></li>';
  }
  html += '</ul>';
  var dv = document.querySelector('.dv')
  dv.innerHTML = html;

</script>

</html>
复制代码

使用js 动态建立 ul li 标签

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

</body>
<script>
  var ul = document.createElement('ul');
  for (var i = 0; i < 10; i++) {
    var li = document.createElement('li');
    var a = document.createElement('a');
    a.innerHTML = "我是一个动态建立的";
    a.href = '#';
    li.appendChild(a);
    ul.appendChild(li);
  }
  document.body.appendChild(ul);

</script>

</html>
<!-- 
建立一个ul 列表


 -->
复制代码

data 动态建立数据

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
</body>
<script>
  var data = [{
      txt: 'js',
      url: 'www.men.com'
    },
    {
      txt: 'api',
      url: 'www.youtube.com'
    },
    {
      txt: 'js高级',
      url: 'www.fackebook.com'
    }
  ]
  var ul = document.createElement('ul');


  for (var i = 0; i < data.length; i++) {
    var li = document.createElement('li');
    var a = document.createElement('a');

    a.innerHTML = data[i].txt;
    a.href = data[i].url;

    li.appendChild(a);
    ul.appendChild(li);
  }

  document.body.appendChild(ul);

</script>

</html>
复制代码

js 运行性能问题 使用 +new Date

var start = +new Date()javascript

var end = +new Date()css

console.log(end -start)html

你们谨记要在内存中处理完成后再加载到页面上 ！！！vue

使用 js 建立 table 标签

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

</body>
<script>
  var table = document.createElement('table');
  table.border = '1';
  table.style.width = '800px;';
  table.style.borderCollapse = 'collapse'; //细 边框表格

  var thead = document.createElement('thead');
  table.appendChild(thead)

  var th_tr = document.createElement('tr');
  thead.appendChild(th_tr);
  th_tr.style.backgroundColor = 'pink';

  var ths = ['js', 'api', '高级js', '闭包', 'vue'];
  for (var i = 0; i < ths.length; i++) {
    var th = document.createElement('th');
    th.innerHTML = ths[i];
    th_tr.appendChild(th);
  }

  var tbody = document.createElement('tbody');
  table.appendChild(tbody);

  //   循环建立每个行
  for (var i = 0; i < 10; i++) {
    var tr = document.createElement('tr');
    table.appendChild(tr);
    if (i % 2 === 1) {
      tr.style.backgroundColor = 'pink'
    }

    for (var j = 0; j < ths.length; j++) {
      var td = document.createElement('td');
      td.innerHTML = '建立';
      tr.appendChild(td);
    }

  }

  document.body.appendChild(table);

</script>

</html>
复制代码

一个DOMO 开关切换收尾

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    html,
    body {
      height: 100%;
      ;
    }

    .active {
      height: 100%;
      background-color: black
    }

  </style>
</head>

<body>
  <button>开关灯</button>
  <div class="active"></div>
</body>
<script>
  var btn = document.querySelector('button');
  var active = document.querySelector('.active')
  var flag = true;
  btn.onclick = function () {
    if (flag) {
      active.className = ''
      flag = false;
    } else {
      active.className = 'active'
      flag = true;
    }
  }

</script>

</html>
复制代码
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程