前端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教程