js的 DOM 操作

最新推荐文章于 2024-04-03 11:38:14 发布

shuzhuang25

最新推荐文章于 2024-04-03 11:38:14 发布

阅读量309

点赞数

分类专栏：前端 javascript 文章标签： DOM javascript

本文链接：https://blog.csdn.net/qq_33429225/article/details/80344462

版权

前端同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

javascript

10 篇文章 0 订阅

订阅专栏

操纵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>