JavaScript的DOM操作

dom對象的innerText和innerHTML有什么區別？

  • innerText 是一個可寫屬性，返回元素內包含的文本內容，在多層次的時候會按照元素由淺到深的順序拼接其內容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="box">
    <p>p標簽</p>
    <span>span標簽</span>
    <a href="#">a鏈接</a>
</div>
<script>
    var box = document.getElementById('box');
    console.log(box.innerText);
// 返回包含的文本內容  p標簽 span標簽 a鏈接
</script>
</body>
</html>
  • innerHTML 返回元素的HTML結構，在寫入的時候也會自動構建DOM
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="box">
    <p>p標簽</p>
    <span>span標簽</span>
    <a href="#">a鏈接</a>
</div>
<script>
    var box = document.getElementById('box');
    console.log(box.innerHTML);
// 返回HTML結構  <p>p標簽</p> <span>span標簽</span> <a href="#">a鏈接</a>
</script>
</body>

elem.children和elem.childNodes的區別？

  • elem.children 非標準屬性，返回指定元素的子元素集合，
    返回HTML節點，所有屬性，不返回文本節點，幾乎所有瀏覽器的都支持
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="box">
    <p>p標簽</p>
    <span>span標簽</span>
    <a href="#" class="btn">a鏈接</a>
</div>
<script>
    var box = document.getElementById('box');
    console.log(box.children);
    // 返回 [p, span, a.btn]
</script>
</body>
</html>
  • elem.childNodes 標準屬性，返回指定元素的子元素集合，包括HTML節點，所有屬性，文本節點
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="box">
    <p>p標簽</p>
    <span>span標簽</span>
    <a href="#" class="btn">a鏈接</a>
</div>
<script>
    var box = document.getElementById('box');
    console.log(box.childNodes);
    // 返回 [text, p, text, span, text, a.btn, text]
</script>
</body>
</html>

查詢元素有幾種常見的方法？ES5的元素選擇方法是什么?

  • 查詢元素基本操作
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="box">
    <p class="title">p標簽</p>
    <span class="title">span標簽</span>
    <a href="#" class="btn">a鏈接</a>
    <a href="#" class="btn">a鏈接</a>
</div>
<input type="text"  name="username">
<input type="password"  name="pwd">
<script>
    var box = document.getElementById('box'); // 獲取id為box的元素
    var tit1 = document.getElementsByClassName('title')[0]; // 獲取第一個class為title的元素
    var tit2 = document.getElementsByClassName('title')[1]; // 獲取第二個class為title的元素
    var btn = document.getElementsByTagName('a')[0]; // 獲取第一個a標簽
    var user = document.getElementsByName('username')[0]; // 獲取第一個name屬性為username元素
</script>
</body>
</html>
  • ES5的元素選擇方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="box">
    <p class="title">p標簽<a href="#" class="btn">a鏈接</a></p>
    <span class="title">span標簽</span>
</div>
<input type="text"  name="username">
<input type="password"  name="pwd">
<script>
    var box = document.querySelector('#box'); // 獲取id為box的元素
    var tit = document.querySelectorAll('.title')[1]; // 獲取第二個class為title的元素
    var child = document.querySelectorAll('.title a')[0]; // 獲取第一個class為title 里面的a元素
    var ipt = document.querySelectorAll('[name=username]')[0]; // 獲取第一個name屬性為username的表單
</script>
</body>
</html>

如何創建一個元素？如何給元素設置屬性？如何刪除屬性

  • 創建元素
var createA = document.createElement('a');
  • 設置屬性
createA.setAttribute('href', 'https://jirengu.com');
  • 刪除屬性
createA.removeAttribute('href');

如何給頁面元素添加子元素？如何刪除頁面元素下的子元素?

  • 元素添加子元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="box"></div>
<script>
    var box = document.getElementById('box');
    var span = document.createElement('span');
    span.innerHTML = '添加一個span';
    box.appendChild(span);
</script>
</body>
</html>
  • 刪除子元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="box">123</div>
<script>
    var box = document.getElementById('box');
    document.body.removeChild(box);
</script>
</body>
</html>

element.classList有哪些方法？如何判斷一個元素的 class 列表中是包含某個 class？如何添加一個class？如何刪除一個class?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="box">123</div>
<script>
    var element = document.getElementById('box');
    element.classList.add('head');      // 添加class屬性為head
    element.classList.remove('head');   // 刪除class屬性為head
    element.classList.contains('head'); // 包含class屬性就是true / 沒有則返回flase
    element.classList.toggle('head');   // 有則刪除返回false，沒有則加上返回true
    element.classList.toString();       // 返回全部屬性的字符串
    element.classList.length;           // 返回全部屬性的長度
</script>
</body>
</html>

如何選中如下代碼所有的li元素？ 如何選中btn元素？

<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">點我</button>
</div>

解答：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div class="mod-tabs">
   <ul>
       <li>list1<li>
       <li>list2<li>
       <li>list3<li>
   </ul>
   <button class="btn">點我</button>
</div>

如何選中如下代碼所有的li元素？ 如何選中btn元素？
<script>
// 獲取所有的li元素
var li = document.getElementsByTagName('li');
console.log(li);
var li1 = document.querySelectorAll('li');
console.log(li);
// 選中btn元素
var btn = document.getElementsByTagName("button")[0];
console.log(btn);
var btn1 = document.getElementsByClassName("btn")[0];
console.log(btn1);
var btn2 = document.querySelector(".btn");
console.log(btn2);
var btn3 = document.querySelectorAll(".btn")[0];
console.log(btn3);
</script>
</body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1.創建節點 createElement()var node = document.createElement(“...
    奶油小生Cc閱讀 759評論 0贊 2
  • JavaScript的DOM操作 由于HTML文檔被瀏覽器解析后就是一顆DOM樹，就需要通過JavaScript來...
    劉滌生閱讀 3,017評論 2贊 7
  • window，所有全局變量都是它的屬性，所有全局的函數都是它的函數。 動態跳轉 document,動態獲取網頁中的...
    一畝三分甜閱讀 140評論 0贊 1
  • “我們愿意結婚是因為我們尊重并欣賞彼此的生活態度和方式！”“我們無論是朋友還是戀人，在一起十年了，將來還會選...
    羌小樣兒閱讀 271評論 0贊 1
  • 1 常常想：如果我是男生，就能當一名云游四方的行者。只需要背上一只旅行包，帶上生活必需品和少量的錢，就能說走就走；...
    清寧若草閱讀 297評論 0贊 0