博主信息
博文 25
粉丝 0
评论 0
访问量 14081
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
前端开发-演示二个获取元素的api 与dom常用的遍历方法20221107
P粉114035831
原创
529人浏览过

演示二个获取元素的api

建二个文件. 1.JS 2.HTML

1.JS

建一个变量
let arr = [10, 1, 22, 8]

// asc数组转为数值升序
console.log(arr.sort((a, b) => a - b))
// des数组转为数值降序
console.log(arr.sort((a, b) => b - a))
// 分行表达
arr = [‘<ul>\n’, ‘<li>xxx</li>\n’,’<li>yyy</li>\n’, ‘</ul>‘]
console.log(arr.join(‘’))
console.log(‘———————————-‘)

arr = [1,2,3,4,5,6,7,8,9]
// 索引2到5.但不包括5
console.log(arr.slice(2, 5))
// 从数组索引2到最后面
console.log(arr.slice(2))
// 从数值最后面开始(从右到左)来计算负值的位置
console.log(arr.slice(-6, -3))
console.log(‘————————‘)

2.html

<body>
<!-- 演示获取DOM元素 -->
<ul class="list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>

<script>
// 选择一组数据用querySelectorAll
const items = document.querySelectorAll(‘.list>‘)
console.log(items)
// 选择一个数据用querySelector
const item = document.querySelector(‘.list>
‘)
console.log(item)


####演示表单元素的获取
// <!--1.获取表单:forms.id -->
// <!-- console.log(document.forms.id) -->
// <!-- 2.获取表单控单:forms.id.name/id (优先选用name,id有可能没有) -->
// <!-- console.log(document.forms.id.name) -->
// <!-- 3.获取表单控件的值:forms.id.name.value -->
// <!-- console.log(document.forms.id.name.value) -->

// <!-- 前后端分离 -->
// <!-- 前端 <->(JSON格式的字符串) <->服务器端 -->
// <!-- 1.获取表邮箱和密码 -->
// <!-- 可简化为: -->
// <!-- let id = document.forms.id -->
// <!-- let email = id.email.value -->
// <!-- let password = id.password.value -->
// <!-- 2.转化为JS对象 -->
// <!-- let user = {email,password} -->
// <!-- 3.把JS对象序列化成JSON字符串 -->
// <!-- let json = JSON.stringify(user) -->
// <!-- console.log(json) -->

// 所有子元素节点
let list ={ document.querySelector(‘.list’)
const getChildren = items => […items].filter(item => item.nodeType === 1)}
console.log(list.children)

// 遍历
// 在[],{},()前分号不能省
// 给其添加个外框
;[…list.children].forEach(item => (item.style.border = ‘1px solid red’))
</script>

</body>

批改老师:PHPzPHPz

批改状态:合格

老师批语:完成的不错, 希望对大家有帮助
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学