Web APIs 入门

目录

1、DOM简介

2、获取元素

2.1、根据ID获取元素

 2.2、根据标签名获取

2.3、通过HTML5新增的方法获取

2.4、获取特殊元素

3、常见的鼠标事件

4、操作元素

4.1、改变元素内容

4.2、样式属性操作

 4.3、排他思想

4.4、自定义属性的操作

5、节点操作

5.1、节点概述

5.2、节点层级

5.3、创建节点

5.4、添加节点

5.5、删除节点

5.6、复制节点

5.7、三种动态创建元素区别


1、DOM简介

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。

W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。

DOM树:

 

  • 文档:一个页面就是一个文档,DOM中使用document表示
  • 元素:页面中的所有标签都是元素,DOM中使用element表示
  • 节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示

DOM把以上内容都看做是对象

2、获取元素

2.1、根据ID获取元素

使用getElementByld()方法可以获取带有ID的元素对象。

document.getElementById ( ' id' ) ;

使用console.dir()可以打印我们获取的元素对象,更好的查看对象里面的属性和方法

 2.2、根据标签名获取

使用getElementsByTagName()方法可以返回带有指定标签名的对象的集合。

document.getElementsByTagName ( '标签名');

注意:

1. 因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历。

2. 得到元素对象是动态的

2.3、通过HTML5新增的方法获取

1. document.getElementsByClassName ( '类名');//根据类名返回元素对象集合

2. document.querySelector( 选择器');                         //根据指定选择器返回第一个元素对象

3.document.queryselectorA11('选择器') ;                        //根据指定选择器返回

注意:

querySelector和 querySelectorAll里面的选择器需要加符号,比如:document. querySelector('#nav');

2.4、获取特殊元素

获取body元素

1. doucumnet.body                                             //返回body元素对象

获取html元素

1. document.documentElement                         //返回html元素对象

3、常见的鼠标事件

鼠标事件触发条件
onclick鼠标点击左键触发
onmouseout鼠标经过触发
onmouseout鼠标离开触发
onfocus获得鼠标焦点触发
onblur失去鼠标焦点触发
onmousemove鼠标移动触发
onmouseup鼠标弹起触发
onmousedown鼠标按下触发

4、操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性

4.1、改变元素内容

element .innerText

从起始位置到终止位置的内容,但它去除 html标签,同时空格和换行也会去掉

element .innerHTML

起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行

4.2、样式属性操作

我们可以通过JS修改元素的大小、颜色、位置等样式。

1. element.style                   行内样式操作

2. element.className           类名样式操作

注意:

  1. JS里面的样式采取驼峰命名法比如fontSize、backgroundColor
  2. JS 修改style 样式操作,产生的是行内样式,cSs权重比较高
  3. 如果样式修改较多,可以采取操作类名方式更改元素样式。
  4.  class因为是个保留字,因此使用className来操作元素类名属性
  5. className会直接更改元素的类名,会覆盖原先的类名。

 4.3、排他思想

如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想算法:

1.所有元素全部清除样式(干掉其他人)

2.给当前元素设置样式(留下我自己)

3.注意顺序不能颠倒,首先干掉其他人,再设置自己

4.4、自定义属性的操作

1.获取属性值

element.属性获取属性值。

element.getAttribute ( '属性');

2.设置属性值

element.属性=值’设置内置属性值。

element .setAttribute ( '属性','值') ;

3.移除属性

element .removeAttribute( '属性');

5、节点操作

5.1、节点概述

一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。

  • 元素节点nodeType 为1
  • 属性节点nodeType为2
  • 文本节点nodeType为3(文本节点包含文字、空格、换行等) 

我们在实际开发中,节点操作主要操作的是元素节点

5.2、节点层级

利用DOM树可以把节点划分为不同的层级关系,常见的是父子兄层级关系。

1、父级节点

node.parentNode

  • parentNode 属性可返回某节点的父节点,注意是最近的一个父节点
  • 如果指定的节点没有父节点则返回null

2、子级节点

1. parentNode.childNodes(标准)

parentNode.childNodes返回包含指定节点的子节点的集合,该集合为即时更新的集合。

注意:返回值里面包含了所有的子节点,包括元素节点,文本节点等。

如果只想要获得里面的元素节点,则需要专门处理。所以我们一般不提倡使用childNodes

var ul = document. queryselector ( 'ul’ );

for (var i = 0; i < ul.childNodes. length; i++){

        if (ul.childNodes [i ].nodeType == 1){

                //ul.childNodes[i]是元素节点

                console.log (ul.childNodes [i] );

}

}

2. parentNode.children((非标准)

parentNode.children是一个只读属性,返回所有的子元素节点。它只返回子元素节点,其余节点不返回(这个是我们重点掌握的)。

虽然children是一个非标准,但是得到了各个浏览器的支持,因此我们可以放心使用

3. parentNode.firstChild

firstChild返回第一个子节点,找不到则返回null。同样,也是包含所有的节点。

4. parentNode . 1astChild

lastChild返回最后一个子节点,找不到则返回null。同样,也是包含所有的节点。

5. parentNode .firstElementchild

firstElementChild返回第一个子元素节点,找不到则返回nulI。

6. parentNode . lastElementChild

lastElementChild返回最后一个子元素节点,找不到则返回null。

注意:这两个方法5和6有兼容性问题,IE9以上才支持。

实际开发中,firstchild和lastchild 包含其他节点,操作不方便,而firstElementChild和lastElementchild 又有兼容性问题,那么我们如何获取第一个子元素节点或最后一个子元素节点呢?

解决方案:

1.如果想要第一个子元素节点,可以使用parentNode. chilren [ 0]

2.如果想要最后一个子元素节点,可以使用parentNode.chilren [parentNode.chilren.length - 1]

3.兄弟节点

1. node.nextSibling

nextSibling 返回当前元素的下一个兄弟元素节点,找不到则返回null。同样,也是包含所有的节点。

2. node.previoussibling

previousSibling返回当前元素上一个兄弟元素节点,找不到则返回null。同样,也是包含所有的节点。

3. node.nextElementSibling

nextElementSibling返回当前元素下一个兄弟元素节点,找不到则返回null。

4. node.previousElementSibling

previousElementSibling返回当前元素上一个兄弟节点,找不到则返回null。

注意:这两个方法3和4有兼容性问题,IE9 以上才支持。

5.3、创建节点

document.createElement ( 'tagName ' )

document.createElement()方法创建由tagName指定的HTML元素。因为这些元素原先不存在,是根据我们的需求动态生成的,所以我们也称为动态创建元素节点。

5.4、添加节点

1. node .appendChild (child)

node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾。类似于css里面的after伪元素。

2. node .insertBefore (child,指定元素)

node.insertBefore()方法将一个节点添加到父节点的指定子节点前面。类似于css里面的 before伪元素。

5.5、删除节点

node. removeChild ( child)

node.removeChild()方法从DOM中删除一个子节点,返回删除的节点。

5.6、复制节点

node.cloneNode ( )

node.cloneNode ( )方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点

注意:

1.如果括号参数为空或者为false,则是浅拷贝,即只克隆复制节点本身,不克隆里面的子节点。

2.如果括号参数为true,则是深度拷贝,会复制节点本身以及里面所有的子节点。

5.7、三种动态创建元素区别

  • document.write ()
  • element.innerHTML
  • document .createElement ()

区别:

1. document.write是直接将内容写入页面的内容流,但是文档流执行完毕,则它会导致页面全部重绘

2. innerHTMI是将内容写入某个DOM节点,不会导致页面全部重绘

3. innerHTML创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂

4. createElement ()创建多个元素效率稍低一点点,但是结构更清晰

总结:不同浏览器下, innerHTML,效率要比creatFlement高

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
设计一个webapis学生报名系统的代码步骤如下: 1. 数据库设计:首先确定需要存储的数据,例如学生的基本信息,课程信息等。根据需求设计数据库表结构,并创建相应的表。 2. 后端接口设计:根据系统需求,设计后端接口,包括学生信息的录入、查询、修改和删除等功能。使用合适的编程语言,如Java、Python等,实现这些接口。 3. 前端界面设计:设计一个用户友好的前端界面,包括学生报名表单和查询功能。使用HTML、CSS、JavaScript等技术实现界面的布局和交互,确保用户能够方便地输入和查询信息。 4. 前后端交互:通过AJAX或其他技术,实现前后端的数据交互。前端向后端发送请求,后端处理请求并返回相应的数据。 5. 学生信息录入:在前端界面设计好的报名表单中,用户输入个人信息,通过调用后端接口将数据传递到后台。后台接收并验证输入的数据,并将学生信息存储到数据库中。 6. 学生信息查询:在前端界面设计好的查询功能中,用户输入需要查询的条件,通过调用后端接口将查询条件传递到后台。后台根据查询条件在数据库中查找匹配的学生信息,并将查询结果返回给前端。 7. 学生信息修改和删除:在前端界面设计好的修改和删除功能中,用户选择需要修改或删除的学生信息,并通过调用后端接口将相应的操作请求传递到后台。后台根据请求进行相应的操作,更新或删除数据库中的对应数据。 8. 错误处理和数据校验:在整个系统设计过程中,需要考虑错误处理和数据校验。在后端接口中,对输入的数据进行合法性检查,确保输入的数据符合要求。在前端界面中,对用户的输入进行格式验证,及时反馈给用户。 9. 安全性保障:为了保障系统的安全性,可以采用身份认证、权限控制等机制,确保只有授权的用户能够进行报名和查询等操作。 10. 测试和部署:在完成系统开发后,进行系统的测试和调试。确保系统的正确性和稳定性。最后将系统部署到服务器上,供用户使用。 以上是一个简单的webapis学生报名系统代码步骤,具体实现还需要根据具体需求进行调整和完善。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值