Web前端最全JS基础8，字节跳动如何面试

读者福利

========

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

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）

| 属性 | 含义 |

| :-: | :-- |

| Ele.style.color=‘red’ | 添加行内样式 |

| Ele.className=‘类名’ | 添加类名 |

| Ele.classList.add(‘类名’) | 添加类名 |

| Ele.classList.remove(‘类名’) | 移除类名 |

操作属性

---

1. 设置属性

setAttribute(‘属性名’,‘属性值’)

2. 获取属性

getAttribute(‘属性名’)

3. 移除属性

removeAttribute(‘属性名’)

查找节点

---

DOM节点对象

---

1. 整个HTML文档看做一个文档对象document

2. 整个HTML标签元素看做DOM节点对象

3. 每个HTML标签元素的内容属性也看做DOM节点对象

注：在元素节点之间有空白文本节点

动态操作节点

---

1. 创建节点

• 创建元素节点

var elment=document.createElenment('div')

• 创建文本节点

var textNode=document.createTextNode('元素')

2. 添加节点

• 给元素追加子节点

父节点.oppendchild('子节点')

• 在父元素指定子节点插入节点

父节点.insertBefore('新子节点'，旧子节点)

3. 删除节点

删除父节点下的子节点

父节点.removeChild('子节点')

子节点.remove()

4. 替换节点

新节点替换父节点下的子节点

父节点.replaceChild('新节点'，'旧节点')

克隆节点

---

节点.clone()

node节点

---

所有节点类型都必须继承node类型，成为node的子类或孙类

| 属性 | nodeType | nodeName | nodeValue |

| :-: | :-: | :-: | :-: |

| 元素 | 1 | 大写标签名 | null |

| 文本 | 3 | #text | 内容 |

| 属性 | 2 | 属性名 | 属性值 |

获取非行间样式

---

window.getComputedStyle(节点对象).样式名

偏移量

---

• offsetTop

距离父元素上面距离

• offsetLeft

距离父元素上面距离

注：没定位与窗口，有定位于父元素

获取元素宽度

---

| 属性 | 含义 |

| :-: | :-- |

| window.getComputedstyle(节点对象).样式名 | 内容 |

| clientWidth | 内容宽+padding |

| offsetWidth | 内容宽+padding+border |