演示二个获取元素的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>