2024年Web前端最全JavaScript学习4：DOM（获取元素、事件基础、操作元素、节点操作，面试加分项 徐强百度云

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

    div1.innerText = 'summer'; // 不识别html标签 非标准
    var div2 = document.querySelector('.div2');
    div2.innerHTML = '<strong>vivian</strong>'; //识别html标签 W3C标准

    //可读写
    var p = document.querySelector('p');
    console.log(p.innerText); // 不识别html标签 不保留空格和换行
    console.log(p.innerHTML); // 识别html标签 保留空格和换行 
    
</script>

##### ②修改属性 element.src、element.title等等


##### ③修改表单属性 element.type、value、checked、selected、disabled


##### ④修改样式属性


**element.style行内样式操作**  
 1.注意采用驼峰命名法，例如 element.style.backgroundColor = ‘pink’;  
 2.修改后的样式会形成行内样式，css权重比较高  
 3.样式比较少、功能简单时使用这种方式  
 **例子**：循环精灵图

<script>
    //1.获取元素 所有的小li
    var lis = document.querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {
        //y坐标
        var index = i \* 44;
        lis[i].style.backgroundPosition = '0 -' + index + 'px';
    }
</script>

![在这里插入图片描述](https://img-blog.csdnimg.cn/2021022523482469.png)  
 **例子**：显示隐藏文本框内容

<!-- 显示隐藏文本框内容 -->
<input type="text" name="" id="" value="手机">
<script>
    var text = document.querySelector('input');
    text.onfocus = function () {
        //判断是否为默认值，如果是则隐藏
        if (this.value == '手机') {
            this.value = '';
        }
        //获得焦点 需要把文本框的颜色加深
        this.style.color = '#333';
    }
    text.onblur = function () {
        //判断是否为空，如果是则修改为默认值
        if (this.value == '') {
            this.value = '手机';
        }
        //失去焦点 需要把文本框的颜色变浅
        this.style.color = '#999';
    }
</script>

**element.className类名样式操作**  
 1.在css中单独写一个类样式，绑定事件时this.className = ‘类名’;  
 2.适合样式较多、功能复杂的情形  
 **例子**：

    <script>
        //获取元素
        var ipt = document.querySelector('.ipt');
        var message = document.querySelector('.message');
        //注册事件 失去焦点
        ipt.onblur = function () {
            if (ipt.value.length < 6 || ipt.value.length > 16) {
                message.className = 'message wrong';
                message.innerHTML = '您输入的位数不对';
            } else {
                message.className = 'message right';
                message.innerHTML = '您输入的正确';
            }
        }
    </script>

##### ⑤排他思想


1.所有元素全部清除样式（排除其他人）  
 2.给当前元素设置样式  
 **例子**：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210227210807494.png)

1 2 3 4 5

**例子：表单全选取消全选（常用）**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2021022722373148.png)

	商品	价钱
	iphone8	8000
	iphone8	8000
	iphone8	8000
	iphone8	8000

<script>
    //全选和取消全选
    var j_cbAll = document.getElementById('j\_cbAll');
    var j_tbs = document.getElementById('j\_tb').getElementsByTagName('input');
    j_cbAll.onclick = function () {
        console.log(this.checked);
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].checked = this.checked;
        }
    }
    //设置下面的复选按钮
    for (var i = 0; i < j_tbs.length; i++) {
        j_tbs[i].onclick = function () {
            //检查是否全选
            var flag = true;
            for (var i = 0; i < j_tbs.length; i++) {
                if (!j_tbs[i].checked) { //存在没有选上的
                    flag = false;
                    break; //提高执行效率
                }
            }
            j_cbAll.checked = flag;
        }
    }
</script>

##### ⑥自定义属性的操作


获取属性值  
 1.element.属性：获取内置属性值  
 2.element.getAttribute(‘属性’)：获取自定义/内置属性值


设置属性值  
 1.element.属性 = ‘值’：设置内置属性  
 2.element.setAttribute(‘属性’ , ‘值’)：设置自定义属性  
 注意：element.**className** = ‘值’；element.setAttribute(‘**class**’,‘值’)


移除属性值  
 element.removeAttribute(‘属性’)


###### 例子：tab栏切换（必备知识）


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210227232533677.png)

li {
list-style-type: none;
}

.tab {
width: 978px;
margin: 100px auto;
}

.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}

.tab_list .current {
background-color: #c81623;
color: #fff;
}

.item_info {
padding: 20px 0 0 20px;
}

.item {
display: none;
}

• 商品介绍
• 规格与包装
• 售后保障
• 商品评价（50000）
• 手机社区

商品介绍模块内容

规格与包装模块内容

售后保障模块内容

商品评价（50000）模块内容

手机社区模块内容

    </div>
</div>
<script>

// 获取元素
var tab_list = document.querySelector(‘.tab_list’);
var lis = tab_list.querySelectorAll(‘li’);
var items = document.querySelectorAll(‘.item’);
// for循环绑定点击事件
for (var i = 0; i < lis.length; i++) {
// 开始给5个小li 设置索引号
lis[i].setAttribute(‘index’, i);
lis[i].onclick = function() {
// 1. 上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式

// 干掉所有人 其余的li清除 class 这个类
for (var i = 0; i < lis.length; i++) {
lis[i].className = ‘’;
}
// 留下我自己
this.className = ‘current’;
// 2. 下面的显示内容模块
var index = this.getAttribute(‘index’);
console.log(index);
// 干掉所有人 让其余的item 这些div 隐藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = ‘none’;
}
// 留下我自己 让对应的item 显示出来
items[index].style.display = ‘block’;
}
}

##### ⑦H5自定义属性（兼容性问题）


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210227232912431.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210227233444115.png)


#### 五、节点操作


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210228155215414.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210228155513365.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)


##### ①父节点


**node.parentNode**：得到离元素最近的父级节点，如果没有就返回null


##### ②子节点


node.childNodes：得到所有子节点（集合） 包含元素节点、文本节点等等，因此想要单独获得元素节点需要筛选出nodeType为1的节点，很麻烦，一般不使用。  
 **node.children**：单独获得元素节点，**实际开发常用**，虽然是非标准，但没有兼容性问题


node.firstChild：第一个子节点，大多情况不是返回元素节点  
 node.firstElementChild：第一个子元素节点，有兼容性问题，ie9以上才支持  
 **node.childen[0]**：最常用写法，没有兼容性问题  
 node.lastChild：最后一个节点，大多情况不是返回元素节点  
 node.lastElementChild：最后一个元素节点，有兼容性问题，ie9以上才支持  
 **node.children[node.children.length - 1]**：最常用写法，没有兼容性问题


##### ③兄弟节点（少用）


node.nextSibling：下一个兄弟节点  
 node.nextElementSibling：下一个兄弟元素节点，兼容性问题  
 node.previousSibling：上一个兄弟节点  
 node.previousElementSibling：上一个一个兄弟元素节点，兼容性问题  
 没有更好的方法：一般自己封装函数：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210228162504364.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)


##### ④创建元素节点并添加节点


创建  
 document.createElement(‘元素’)  
 添加  
 node.appendChild(child)  
 node.insertBefore(child,指定元素)


var ul = document.querySelector(‘ul’);  
 var li = document.**createElement**(‘li’);  
 ul.**appendChild**(li); //追加元素


ul.**insertBefore**(li,指定元素); //在指定元素前面加


##### ⑤删除节点


node.removeChild(child)


链接不跳转：  
 < a href = ‘javascript:;’>< /a>


##### ⑥复制节点


node.cloneNode()  
 注意：  
 1.如果括号为空或者false，**浅拷贝**，即只克隆节点本身，不克隆里面的子节点、内容。  
 2.如果括号参数为true，**深拷贝**，会克隆节点本身以及里面所有子节点  
 克隆完还要添加（insertBefore/appendChild）才会显示


##### 案例：动态生成表格（重要）


![在这里插入图片描述](https://img-blog.csdnimg.cn/2021022818060019.png)

TCP协议

• TCP 和 UDP 的区别？
• TCP 三次握手的过程？
• 为什么是三次而不是两次、四次？
• 三次握手过程中可以携带数据么？
• 说说 TCP 四次挥手的过程
• 为什么是四次挥手而不是三次？
• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

三次？

• 半连接队列和 SYN Flood 攻击的关系
• 如何应对 SYN Flood 攻击？
• 介绍一下 TCP 报文头部的字段
• TCP 快速打开的原理(TFO)
• 说说TCP报文中时间戳的作用？
• TCP 的超时重传时间是如何计算的？
• TCP 的流量控制
• TCP 的拥塞控制
• 说说 Nagle 算法和延迟确认？
• 如何理解 TCP 的 keep-alive？

[外链图片转存中…(img-VnO9qfAw-1715369900956)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

• 浏览器缓存?
• 说一说浏览器的本地存储？各自优劣如何？
• 说一说从输入URL到页面呈现发生了什么？
• 谈谈你对重绘和回流的理解
• XSS攻击
• CSRF攻击
• HTTPS为什么让数据传输更安全？
• 实现事件的防抖和节流？
• 实现图片懒加载？

[外链图片转存中…(img-YZ09Sn8Z-1715369900957)]