马木木的个人博客

记录一些学习路上的点滴

js的 DOM 操作

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

阅读更多
文章标签: DOM javascript
个人分类: 前端 javascript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

js的 DOM 操作

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭