节点操作和插件

编程入门行业动态更新时间:2024-10-25 12:17:35

节点操作和插件

节点操作

DOM节点

DOM树：DOM将HTML文档以树状结构直观的表现出来—称为DOM树 /节点树

**节点(Node)**是DOM树中的单个点,包括文档本身，元素，文本以及注释，属性都属于节点

元素节点

所有的标签比如body，div

html是根节点
属性节点

所有的属性比如 id，href
文本节点

所有的文本

学习节点有什么好处?

利用节点关系可以更好的操作元素(查询元素更方便)

查询节点

查找节点:利用节点关系查找节点,返回的都是对象

父节点 parentNode 返回最近一级的父节点对象，找不到返回null

子元素.parentNode

子节点

children 获得所有的子元素节点,返回的是一个伪数组

节点对象.children

兄弟节点

previousElementSibling 上一个兄弟

nextElementSibling下一个兄弟

ul.children[下标]

增加节点

创建一个新的节点，把创建的新的节点放入到指定的元素内容

创建节点

document.createElement('标签名')

追加节点

把创建的节点插入到某个父元素中

1.父元素最后一个子节点之后，插入节点元素

element.append()

2.父元素第一个子元素之前，插入节点元素

element.prepend()

删除节点

element.remove()
把对象从它所属的DOM树中删除

移动端事件

移动端有自己的事件，触屏事件touch(触摸事件)，Android和ios都有

touch对象代表一个触摸点，触摸点可能是一根手指，也可能是一根触摸笔；

触摸事件可响应用户手指(触摸笔)对屏幕或者触控板操作

常见的触摸事件

touchstart 手指触摸到一个DOM元素时触发
touchmove 手指在一个DOM元素上滑动时触发
touchend 手指从一个DOM元素上移开时触发

插件-swiper

插件–别人写好的代码，我们只需要复制对应的代码，就可以实现对应的效果

思路：

1.看官网 /

2.基本使用流程 .html

3.写小demo

4.应用

AlloyFinger

AlloyFinger是腾讯AlloyTeam团队开源的超轻量级web手势插件，为元素注册各种手势事件

使用步骤:

1.引入js库 @0.1.16/alloy_finger.js

2.配置

  new AlloyFinger(element,{  //element 是给哪个元素做滑动事件swipe:function(e){//滑动的时候要做的事情 e.direction 可以判断上下左右滑动 left right等}})

联系人案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.header {width: 100%;height: 40px;line-height: 40px;background-color: orange;text-align: center;color: #fff;}/* .content {display: flex;flex-direction: column;} */.item {display: flex;align-items: center;position: relative;height: 50px;line-height: 50px;border-bottom: 1px solid #eee;background-color: #fff;transition: all .3s;}.circle {display: inline-block;width: 30px;height: 30px;line-height: 30px;background-color: pink;border-radius: 50%;text-align: center;margin-left: 50px;margin-right: 10px;}.name {width: 70px;margin-right: 35px;}.phone {background-color: #fff;}.delete-box {position: absolute;z-index: -1;top: 0;right: 0;display: flex;justify-content: center;align-items: center;width: 50px;height: 50px;background-color: #f7f7f7;}.delete {display: inline-block;width: 40px;height: 40px;line-height: 40px;text-align: center;font-size: 14px;border-radius: 50%;background-color: pink;}.active {transform: translateX(-50px);}.footer {width: 100%;position: fixed;bottom: 0;padding: 10px;border-top: 1px solid #ccc;}.addName,.addPhone {width: 100px;height: 20px;outline-style: none;}</style>
</head><body><div class="header">通讯录</div><div class="content"><!-- <div class="item"><div class="circle">月</div><div class="name">五月</div><div class="phone">13500000000</div><div class="delete-box"><span class="delete" data-index="${ind}">删除</span></div></div> --></div><div class=" footer"><input type="text" class="addName" placeholder="联系人姓名"><input type="text" class="addPhone" placeholder="联系人电话"><button class="addBtn">添加联系人</button></div><script src=" @0.1.16/alloy_finger.js"></script><script>// 模拟数据// const initData = [//     { name: '欧阳娜娜', tel: '13500000000' },//     { name: '杨幂', tel: '13500000000' },//     { name: '胡歌', tel: '13500000000' },//     { name: '赵丽颖', tel: '13500000000' },//     { name: '唐嫣', tel: '13500000000' },// ]// localStorage.setItem('initData', JSON.stringify(initData))const arr = JSON.parse(localStorage.getItem('initData') || '[]')// 封装渲染函数function render() {const content = document.querySelector('.content')let str = ''arr.forEach((element, index) => {str += `<div class="item"><div class="circle">${element.name.substring(element.name.length - 1)}</div><div class="name">${element.name}</div><div class="phone">${element.tel}</div><div class="delete-box"><span class="delete" data-index="${index}">删除</span></div></div>`});content.innerHTML = strinitSwipe()}render()/*2.利用alloyfinger 手势插件实现滑动效果2-1.forEach遍历每一个item2-2.遍历的同时给每一个item添加滑动效果如果是左侧滑动，则添加active类 实现滑动效果  显示删除按钮否则移除active类，隐藏删除按钮封装一个函数 initSwipe  提供给渲染函数使用*/// 封装initSwipe函数function initSwipe() {const items = document.querySelectorAll('.item')items.forEach(element => { // element 是给哪个元素做滑动事件// 每一个item添加滑动效果new AlloyFinger(element, {swipe: function (e) {// Left Right Up Dowmconsole.log(e.direction)// 如果往左滑动 给item添加active类  让盒子左侧移动if (e.direction === 'Left') {// 先要移除其余的element的active这个类  const old = document.querySelector('.active')old && old.classList.remove('active')// 当前滑动的元素添加active类element.classList.add('active')} else {element.classList.remove('active')}}})})}/* 新增 ： 尽量减少dom操作---  操作数组新增数据----追加给数组---利用数组渲染页面1.点击新增按钮   表单校验 return2.如果用户输入正确，把收集的表单数据生成对象  追加给arr数组*/// 新增联系人const name = document.querySelector('.addName')const phone = document.querySelector('.addPhone')const nameEle = document.querySelector('.name')const phoneEle = document.querySelector('.phone')const addBtn = document.querySelector('.addBtn')addBtn.addEventListener('click', function () {if (name.value == '' | phone.value == '') {return alert('输入不能为空！')}// 把收集的表单数据生成对象  追加给arr数组const uobj = {name: name.value,tel: phone.value,}arr.push(uobj)localStorage.setItem('initData', JSON.stringify(arr))// 重新渲染页面render()// 表单清空name.value = ''phone.value = ''})/* 删除  确定要删除的数据---新增元素无法直接注册事件----事件委托*/// 删除联系人const content = document.querySelector('.content')content.addEventListener('click', function (e) {if (e.target.tagName === 'SPAN') {let index = e.target.dataset.indexconst con = confirm('您确定要删除该联系人吗？')if (con) {arr.splice(index, 1)localStorage.setItem('initData', JSON.stringify(arr))render()}}})</script>
</body></html>