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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • JavaScript的DOM操作(节点操作)
    1.创建节点 createElement()var node = document.createElement(“...
    奶油小生Cc阅读 759评论 0赞 2
  • JavaScript的DOM操作
    JavaScript的DOM操作 由于HTML文档被浏览器解析后就是一颗DOM树，就需要通过JavaScript来...
    刘涤生阅读 3,018评论 2赞 7
  • JavaScript的dom操作
    window，所有全局变量都是它的属性，所有全局的函数都是它的函数。 动态跳转 document,动态获取网页中的...
    一亩三分甜阅读 140评论 0赞 1
  • 婚姻之问
    “我们愿意结婚是因为我们尊重并欣赏彼此的生活态度和方式！”“我们无论是朋友还是恋人，在一起十年了，将来还会选...
    羌小样儿阅读 271评论 0赞 1
  • 我愿如湖般静美
    1 常常想：如果我是男生，就能当一名云游四方的行者。只需要背上一只旅行包，带上生活必需品和少量的钱，就能说走就走；...
    清宁若草阅读 297评论 0赞 0