找到那个dom

最新推荐文章于 2022-07-19 11:18:22 发布

qq_40891002

最新推荐文章于 2022-07-19 11:18:22 发布

阅读量169

点赞数

分类专栏： js 文章标签： js javascript

本文链接：https://blog.csdn.net/qq_40891002/article/details/106228085

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

前端学院的第19天，任务是找那个dom,刚开始学的时候，想系统学一下什么是dom，于是两天前开始看书，书上有很多案例，有的还没有完全理解，比如说标签栏切换效果，让我独立写一下可能还不行，于是先来完成这个任务，任务是先给你一段代码定义几个函数补充完就行，就这刚开始还是写不太好，把最后写的记下吧！！

<!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() {
		var x=document.getElementsByTagName('li');
		return x;
        // 返回页面中所有li标签
		//一下用另一种选择器
		var x=document.querySelectorAll('li');
		return x;
		
    }

    function findAllHtmlSpanInOneSection(sectionId) {
        // 返回某个section下所有span中内容为HTML的span标签
		var x=document.getElementById(sectionId);
		var y=x.getElementsByTagName('span');
		var f=new array();
		for(var i=0;i<y.length;i++)
		{
			if(y[i].innerHTML=="HTML")
			{
				f.push(y[i]);
			}
		}
		return f;
		
    }

    function findListItem(sectionId, spanCont) {
        // 返回某个section下，所有所包含span内容为spanCont的LI标签
		var x=document.getElementById("sectionId");
		var y=x.document.getElementsByTagName('span');
		var f=new Array();
		for(var i=0;i<y.length;i++)
		{
			if(y[i].innerHTML==spanCont)
			{
				f.push(y[i]);
			}
		}
		return f;
    }

    function getActiveLinkContent(sectionId) {
        // 返回某个section下，class为active的链接中包含的文字内容
		var x=document.getElementById("sectionId");
		var y=x.document.getElementsByTagName('a');
		var f=new Array();
		for(var i=0;i<y.length;++i)
		{
			if(y[i].className=="active")
			{
				f.push(y[i].innerHTML);
			}
		}
		return f;
    }

    </script>
</body>
</html>

总结一下这个任务主要考察，利用document对象的方法

主要有一下几个

document.getElementById();//返回对拥有指定id的第一个对象的引用

document.getElementByName();//返回带有指定名称的对象集合

document.getElementsByTagName();//返回带有指定标签名的对象集合,这里要注意中间有个s加以区分

document.getElementsByClassName();//返回带有指定类名的对象集合

以上，第一个返回的是一个对象，第二三四都是一个集合，多加注意这个区别

还有document对象的属性

document.body //返回文档的body元素

document.documentElement //返回文档的html元素

document.forms //返回对文档中所有的Form对象引用

document.images //返回对文档中所有的Image对象引用

例如：

var body=document.getElementsByTagName('body'）[0];

var html=document.getElementsByTagName('html')[0];

console.log(document.body===body);

console.log(document.documentElement===html);//比较返回结果，返回true

元素内容

属性:innerHTML innerText textContent

方法:document.write() //向文档写入指定的内容

HTML5新增的document对象方法

分别为querySelector() //返回文档中匹配到指定的元素或css选择器第一个对象的引用

和 querySelectorAll() //返回文档中匹配到指定的元素或css选择器的对象集合

console.log(document.querySelector('div')); //获取匹配的第一个div

console.log(document.querySelector('#box')); //获取id为box的第1个div

console.log(document.querySelector('.bar')); //获取class为box的第一个div

console.log(document.querySelector('div[name]')); //含有name属性的第一个div

console.log(document.querySelector('div.bar')); //获取文档中class为bar 的第一个div

console.log(document.querySelector('div#bar')); //获取文档中id为bar的第一个div

写代码时遇到的一些问题

1.没有定义x，直接想return

2.var f=new array();//这是定义一个空数组的方法，数组对象的作用，使用单一的变量名来存储一系列值

3.push（）方法可向数组的末尾添加一个或多个元素，并返回新的长度。

qq_40891002

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
找到那个dom

前端学院的第19天，任务是找那个dom,刚开始学的时候，想系统学一下什么是dom，于是两天前开始看书，书上有很多案例，有的还没有完全理解，比如说标签栏切换效果，让我独立写一下可能还不行，于是先来完成这个任务，任务是先给你一段代码定义几个函数补充完就行，就这刚开始还是写不太好，把最后写的记下吧！！<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>IFE
复制链接

扫一扫