01-元素创建和添加

// 创建元素
// docuemnt.createEelement(tagName)
var box = document.createElement(‘div’);
box.textContent = ‘你好世界’;
// console.log(box);
// 在一个父节点中追加子节点
// parentNode.appendChild(childNode);
// document.body.appendChild(box);
// 在指定的父节点中 在一个已存在的子节点前 插入新节点
// parentNode.insertBefore(newChild,oldChild)

02-元素删除和替换

// 删除子元素 返回被删除的元素
// parentNode.removeChild(childNode);
var list = document.querySelector(‘#list’);
var list2 = document.querySelector(‘#list2’);
var item3 = document.querySelector(‘#list>li:nth-child(3)’);
// var result = list.removeChild(item3);
// // console.log(result);
// list2.appendChild(result);
// ————————————————
// element.remove(); 删除被选元素 没有返回值
// item3.remove();
// —————————————————
var newLi = document.createElement(‘li’);
newLi.textContent = ‘新元素’;
// 在指定父节点中 使用一个新节点 替换一个以存在的旧节点
// parentNode.replaceChild(newChild,oldChild);

03-HTMLDOM

// HTMLDOM 核心思想 就是将 HTML元素 对象化
// 将每一个标签 看作是一个对象
// 标准DOM 可以 创建 修改 添加 删除 替换 查询 各种节点 属性操作
// HTMLDOM 适用于 属性的访问和修改
window.onload = function () {
var h1 = document.querySelector(‘#text’);
// console.log(h1);
// h1.setAttribute(‘title’, ‘hahaha’);
// console.log(h1.getAttribute(‘id’));
// 对象化的意思 是将标签当成对象
// 对象访问属性的语法 也会交给 元素
// 对象.属性
// console.log(h1.id);
// h1.title = ‘你好世界’;
// 需要注意的是 style 属性 也是对象 保存了 所有的行内样式信息
// console.log(h1.style.color);
// console.log(h1.style.cssText);
// ——————————————
// var img = document.createElement(‘img’);
// console.log(img);
// var img2 = new Image();
// console.log(img2);
// var e = new Option();
// console.log(e);

04-css属性

// 获得元素的盒模型大小
// 盒模型(box-sizing)
// content-box 标准盒模型 尺寸 = content+padding+border
// border-box 怪异盒模型 尺寸 = content
// offsetHeight / offsetWidth
// console.log(inner.offsetHeight, inner.offsetWidth);
// 获得元素的定位位置
// 元素的定位值 取决于最近的定位元素
// 若没有定位的祖先级元素 则基于 body 进行取值
// offsetTop / offsetLeft

05-计算后样式

// elm.style 只能获得 和设置 元素的 行内样式
// console.log(text.style.border);
// console.log(text.style.width);
// console.log(text.style.color);
// 获得计算后样式
// getComputedStyle(elm)
// console.log(getComputedStyle(text)[‘width’]);
// ie9以下的浏览器 没有这个函数
// 可以使用
// elm.currentStyle[style];
// 兼容
// function getStyle(elm, style) {
// if (typeof getComputedStyle === ‘function’) { // 判断浏览器是否有该函数
// return getComputedStyle(elm)[style];
// } else {
// return elm.currentStyle[style];
// }
// }

06-文档碎片

// 重绘: 当页面中的元素样式不影响内容在文档流中的位置时 浏览器会对新的样式进行重绘操作。
// 比如: 背景颜色 文字颜色 2D变换 边框色 visibility等等…
// 回流: 当渲染树的内容会造成元素的尺寸或布局、隐藏、文档流位置改变 在会从新渲染DOM 或 部分渲染DOM
// 回流一定会引起重绘 而重绘不一定会引起回流
// —————————————————————————————————-
// JS中的DOM操作 可以改变元素的样式(大小 隐藏、显示 位置 等等)
// JS的DOM操作 很多操作会触发 回流 意味着 浏览器需要重新渲染DOM
// 回流是一个比较消耗性能的操作 所以 经历避免大量使用DOM操作
// CSS能完成的操作尽量不用JS完成
// 尽量减少回流
// 文档碎片
// 将创建型的DOM操作 放入一个临时的DOM片段 然后一次性将其加入到目标元素中
// document.createDocumentFragment();

07-滚动条和滚动事件

// 浏览器窗口滚动条事件
// window.onscroll
window.onscroll = function () {
// console.log(‘滚动条在动’);
// 获得滚动条到页面顶部的距离(html元素的scrollTop)
// console.log(document.documentElement.scrollTop);
// console.log(innerHeight);
// console.log(3500 - innerHeight); // 可以移动距离
// 获得可以移动的总距离
var height = document.body.offsetHeight - innerHeight;
// console.log(height);
// 获得已经移动的距离
var top = document.documentElement.scrollTop;
// console.log(top / height); // 计算移动比例
i.style.width = top / height * 100 + ‘%’; // 回流
}