Web前端开发技术项目教程课件 8.1.4知识点3：函数和DOM.pptx

信息安全技术应用ApplicationofInformationSecurityTechnology函数和DOM《前端技术开发》

前端技术开发目录函数1获取元素2修改属性3任务实施4

1函数前端技术开发

函数Web前端技术1函数是一段可重复使用的代码块，它可以接受输入（称为参数），执行一些操作，并返回结果（称为返回值）。函数在JavaScript中非常核心，因为它们允许我们封装代码，使其更易于重用和维护。

函数Web前端技术1函数是一段可重复使用的代码块，它可以接受输入（称为参数），执行一些操作，并返回结果（称为返回值）。函数在JavaScript中非常核心，因为它们允许我们封装代码，使其更易于重用和维护。functiongreet(name){returnHello,+name+!;}console.log(greet(Alice));//输出:Hello,Alice!

函数Web前端技术1函数的参数可以有默认值。这意味着如果调用函数时没有提供某个参数的值，那么该参数将使用其默认值。这是从ES2015（也称为ES6）开始引入的新特性。functiongreet(name=World){returnHello,+name+!;}console.log(greet(Alice));//输出:Hello,Alice!console.log(greet());//输出:Hello,World!

2获取元素前端技术开发

获取元素Web前端技术2DOM（文档对象模型）是用于操作HTML和XML文档的编程接口。DOM允许程序和脚本动态地访问和更新文档的内容、结构和样式。下面是一些常用的查询接口：接口含义getElementById返回具有指定ID的元素。getElementsByClassName返回一个类数组的对象，包含所有具有指定类名的元素。getElementsByTagName返回一个类数组的对象，包含所有具有指定标签名的元素。querySelector返回匹配指定CSS选择器的第一个元素。querySelectorAll返回一个NodeList对象，包含所有匹配指定CSS选择器的元素。

获取元素Web前端技术2其中querySelector和querySelectorAll是HTML5中新增的标准，功能最强大，鼓励使用。//获取id为header的元素letheader=document.querySelector(#header);//获取所有class为section的元素letsections=document.querySelectorAll(.section);//获取所有p标签letp=document.querySelectorAll(p);

3修改属性前端技术开发

修改属性Web前端技术3元素身上的style属性决定了它的外观。所有CSS中可以定义的属性在style中都有：pid=textThisisatestmessage./pscript lettext=document.querySelector(#text); text.style.color=blue; text.style.fontSize=20px;/script#text{ color:blue; font-size:20px;}

修改属性Web前端技术3CSS的属性名称中出现“-”分割的单词，在style中的属性名称就按照小驼峰命名法处理：CSS属性DOM中的style属性background-colorbackgroundColorfont-sizefontSize…………

4任务实施前端技术开发

任务实施Web前端技术4准备好3到5幅图片，图片的尺寸尽量保持一致。在页面上放置一个固定尺寸的图层作为窗口，窗口的尺寸也和图片的尺寸保持一致。将所有图片塞入一个容器（也是图层），让图片水平排列。下面是代码：!DOCTYPEhtmlhtmlheadmetacharset=utf-8titleJavascriptDemo/titlestyle.carousel{width:500px;height:280px;margin:auto;}.carouselimg{width:500px;height:280px;display:block;float:left;}/style/headbodydivclass=carouselimgsrc=id=carousel-image/div/body/html

任务实施Web前端技术4窗口初始化后，使用DOMAPI获取图片元素，设置src属性。s