JavaScript的DOM操作

2017-04-19  本文已影响0人  柏龙

dom对象的innerText和innerHTML有什么区别?

<!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>
<!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的区别?

<!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>
<!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>
<!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>
上一篇 下一篇

猜你喜欢

热点阅读