目录
1.获取操作的元素
document对象的方法
document对象的属性
Element对象的方法和属性
2.元素内容操作
3.元素属性操作
4.classList的使用
5.获取节点
6.节点追加
常见节点类型
1.获取操作的元素
document对象的方法
document对象的属性
Element对象的方法和属性
在DOM操作中，元素对象也提供了获取某个元素内指定元素的方法，常用的两个方法分别为getElementsByClassName()和getElementsByTagName()。它们的使用方式与document对象中同名方法相同。
<body><div id="box">box</div><div class="bar">bar</div><div name="main">main</div><script>console.log(document.getElementById('box')); // 获取id为box的元素console.log(document.getElementsByClassName('bar')); // 获取所有class为bar的元素console.log(document.getElementsByTagName('div'));// 获取所有标签为div的元素console.log(document.getElementsByName('main')); // 获取所有name为main的元素</script><script>var box = document.getElementById('box');// 根据id获取元素对象var divs = document.getElementsByTagName('div'); // 根据标签名获取对象集合console.log(divs[0] === box); // 输出结果：true</script><script>console.log(document.querySelector('div')); // 获取匹配到的第1个divconsole.log(document.querySelector('#box')); // 获取id为box的第1个divconsole.log(document.querySelector('.bar')); // 获取class为bar的第1个divconsole.log(document.querySelector('div[name]')); // 获取含有name属性的第1个divconsole.log(document.querySelector('div.bar')); // 获取文档中class为bar的第1个divconsole.log(document.querySelector('div#box')); // 获取文档中id为box的第1个div</script></body>
运行效果：
2.元素内容操作
元素内容
<body><div id="box">The first paragraph...<p>The second paragraph...<a href="">third</a></p></div><script>var box = document.getElementById('box');console.log(box.innerHTML);console.log(box.innerText);console.log(box.textContent);</script></body>
运行效果：
3.元素属性操作
元素属性
<style>.gray{background: #CCC;}#thick{font-weight: bolder;}</style>
<body><div>test word.</div><script>// 获取div元素var ele = document.getElementsByTagName('div')[0];// ① 输出当前ele的属性个数console.log('未操作前属性个数：' + ele.attributes.length);// ② 为ele添加属性，并查看属性个数ele.setAttribute('align', 'center');ele.setAttribute('title', '测试文字');ele.setAttribute('class', 'gray');ele.setAttribute('id', 'thick');ele.setAttribute('style', 'font-size:24px;border:1px solid green;');console.log('添加属性后的属性个数：' + ele.attributes.length);// ③ 获取ele的style属性值console.log('获取style属性值：' + ele.getAttribute('style'));// ④ 删除ele的style属性，并查看剩余属性情况ele.removeAttribute('style');console.log('查看所有属性：');for (var i = 0; i < ele.attributes.length; ++i) {console.log(ele.attributes[i]);}</script></body>
运行效果：
4.classList的使用
元素样式
classList的属性和方法
<style>.bg{background:#ccc;}.strong{font-size:24px;color:red;}.smooth{height:30px;width:120px;border-radius:10px;}</style>
<body><ul><li>PHP</li><li class="bg">JavaScript</li><li>C++</li><li>Java</li></ul><script>// 获取第2个li元素var ele = document.getElementsByTagName('li')[1];// 若li元素中没有strong类，则添加if (!ele.classList.contains('strong')) {ele.classList.add('strong');}// 若li元素中没有smooth类，则添加；若有删除ele.classList.toggle('smooth');console.log('添加与切换样式后：');console.log(ele);</script><script>ele.classList.remove('bg');console.log('删除后：');console.log(ele);</script></body>
运行效果：
5.获取节点
<body><ul id="ul"><li>JS</li><li>BOM</li><li>DOM</li><!--注释--></ul><script>var ul = document.getElementById('ul'); // 根据id获取ul的元素对象console.log(ul.childNodes);// 查看ul下的所有节点</script></body>
运行效果：
6.节点追加
<script>var h2 = document.createElement('h2'); // 创建h2元素节点var text = document.createTextNode('Hello JavaScript'); // 创建文本节点var attr = document.createAttribute('align'); // 创建属性节点attr.value = 'center'; // 为属性节点赋值h2.setAttributeNode(attr); // 为h2元素添加属性节点h2.appendChild(text); // 为h2元素添加文本节点document.body.appendChild(h2); // 将h2节点追加为body元素的子节点console.log(document.getElementsByTagName('h2')[0]);</script>
运行效果：
7.删除节点和节点属性
语法：removeChild()和removeAttributeNode()方法实现。
<body><ul><li>PHP</li><li>JavaScript</li><li class="strong">UI</li></ul><script>var child = document.getElementsByTagName('li')[2]; // 获取第3个li元素var attr = child.getAttributeNode('class'); // 获取元素的class属性值console.log(child.removeAttributeNode(attr));// 删除元素的class属性值console.log(child.parentNode.removeChild(child));// 删除元素</script></body>
运行效果：
js第7章DOM案例：获取操作的元素 元素内容操作 元素属性操作 classList的使用 获取节点 节点追加 删除节点和节点属性
