操纵DOM,最方便的还是Jquery,但是如果不使用库,JS的原生方法也很强大。
1、主流操作方法
1)querySelector
var link = document.querySelector('a');//寻找到第一个a
2)querySelectorAll
Document.querySelectorAll()//查找到所有的a
//把它们的引用存储在一个array
3)之后,就可以对一些具体的属性(内容)进行操作
eg:
link.textContent = 'Mozilla Developer Network';
link.href = 'https://developer.mozilla.org';
2、旧的方法,分别对于id、class、tag有不同的选择器
Document.getElementById(),选择一个id属性值已知的元素,
例如<p id="myId">My paragraph</p>。ID作为参数传递给函数,即
var elementRef = document.getElementById('myId')。
Document.getElementsByTagName(),返回页面中包含的所有已知类型元素的数组。如<p>、<a>。元素类型作为参数传递给函数,即
var elementRefArray = document.getElementsByTagName('p').
3、创建并放置新的节点
let parent=document.querySelector('section');
let child= document.createElement('p');//创建一个新的段落
child.textContent=’hello’
parent.appendChild(child)
4、移动和删除元素
linkPara是指向该段落唯一副本的引用。如果你想做一个副本并也把它添加进去,只能用Node.cloneNode() 方法来替代。
删除节点也非常的简单,至少,你拥有要删除的节点和其父节点的引用。在当前情况下,我们只要使用Node.removeChild()即可
eg:删除自己
linkPara.parentNode.removeChild(linkPara);
贴一个做的例子
代码链接:Github
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IFE ECMAScript</title>
</head>
<body>
<div id="wrapper">
<div id="news-top" class="section">
<h3>Some title</h3>
<div class="content">
<ul>
<li><span>HTML</span><a href="">Some Link1</a></li>
<li><span>JS</span><a class="active" href="">Some Link2</a></li>
<li><span>CSS</span><a href="">Some Link3</a></li>
<li><span>JS</span><a href="">Some Link4</a></li>
</ul>
</div>
<img src="">
<p class="">Some Text</p>
</div>
<div id="news-normal" class="section">
<h3>Some title</h3>
<div class="content">
<ul>
<li><span>HTML</span><a href="">Some Link1</a></li>
<li><span>HTML</span><a href="">Some Link2</a></li>
<li><span>JS</span><a class="active" href="#">Some Link3</a></li>
<li><span>CSS</span><a href="">Some Link4</a></li>
</ul>
</div>
<img src="">
<p class="">Some Text</p>
</div>
</div>
<script>
function getAllListItem() {
let li = document.querySelectorAll('li')
console.log(li);
return li;
// console.log('------------------------------------------')
// 返回页面中所有li标签
}
function findAllHtmlSpanInOneSection(sectionId) {
// 返回某个section下所有span中内容为HTML的span标签
let section = document.querySelector(`#${sectionId}`);
let li = section.querySelectorAll('li')
let list = []
for (let ind of li) {
list.push(ind)
}
let result = list.filter((liPer) => {
let span = liPer.querySelector('span');
if (span.textContent == 'HTML') {
return (liPer)
}
})
console.log(result);
return li
}
function findListItem(sectionId, spanCont) {
// 返回某个section下,所有所包含span内容为spanCont的LI标签
let section = document.querySelector(`#${sectionId}`);
let li = section.querySelectorAll('li')
let list = []
for (let ind of li) {
list.push(ind)
}
let result = list.filter((liPer) => {
let span = liPer.querySelector('span');
if (span.textContent == `${spanCont}`) {
return (liPer)
}
})
console.log(result)
}
function getActiveLinkContent(sectionId) {
// 返回某个section下,class为active的链接中包含的文字内容
let section = document.querySelector(`#${sectionId}`);
let result = section.querySelectorAll('.active');
return result;
}
//getAllListItem()
//findAllHtmlSpanInOneSection('news-top');
//findListItem('news-normal','HTML')
getActiveLinkContent('news-normal')
</script>
</body>
</html>