前端笔记—第15篇js中的DOM操作

获取事件源

• document.getElementById()
• document.getElementsByClass()
• document.getElementsByTagName()
• document.getElementsByName()
• document.querySelector()
• document.querySelectorAll()

获取兄弟节点

//1.获取下一个兄弟节点
var span = document.getElementById('span');
var nextNode = span.nextElementSibling || span.nextSibling;//兼容IE678
//2.获取上一个兄弟节点
var previous = span.previousElementSibiling || span.previousSibling;
//3.获取第一个子节点
var firstChild = box.firstElementChild || box.firstChild;
//4.获取最后一个子节点
var lastChild = box.lastElementChild || box.lastChild;
//5.获取多个子节点的方法
var child = box.childNodes;//注意此时拿到的还有别的节点，如文本节点，注释节点，标签节点，而我们最想要的就是标签节点
var newList = [];
for(var i = 0; i < child.length; i++){
    var node = child[i];
    if(node.nodeType === 1 ){//元素节点的类型为1，其余的查文档就可以了
        newList.push(node);
    }
}
//6.通过非w3c标准的方法获取
var child = box.children;//注意点在IE678中会拿到注释节点的，但是在高版本的浏览器中只会拿到标签节点
//7.获取任意的兄弟节点
var child1 = box.parentNode.children[0];
var child3 = box.parentNode.children[3];
复制代码

DOM节点的操作

var box = document.getElementById('box');
//1.创建DOM节点
var span = document.createElement('span');
//2.添加属性
span.class = 'span1'
span.setAttribute('class','span1');
span.getAttribute('class');//获取节点属性
//3.插入到指定的位置
box.appendChild(span);//默认是插入插入到指定元素的最后的
box.insetBefore(插入元素，指定元素)
//4.删除节点
box.parentNode.removeChild(span);
span.remove();
//5.节点属性的设置，获取，删除
//6.复制节点
var newTag = box.cloneNode(false);//设置为false的时候是浅拷贝，如果设置为true的时候是深拷贝
复制代码

获取标签的内容

var box = document.getElementById(box);
//获取标签内的所有内容包括文本和标签
box.innerHTML();
//获取标签内的文本内容
box.innerText();
//获取单闭合标签的值
box.value
复制代码

• 输入框获得焦点和失去焦点的

var name = document.getElementbyId('box');
name.onfocus = function(){};//输入框或的焦点
name.onblur = function(){};//输入框失去焦点
name.onchange = function(){};//可以理解为输入框失去焦点而且value发生变化的时候触发该事件
复制代码

• 排他思想的使用：最好的解决方式就是闭包
• 判断字符串的真实长度

var str = 'hello,世界';
function strLen(str){
    var len = 0;
    var Str = str.length;
    var code = 0;
    for(var i = 0; i < Str; i++){
        code = str.charCodeAt(i);//表示放回字符串的i+1为字符的Unicode编码
        if(code > 0 && code <= 127){
            len += 1;
        }else{
            len += 2;
        }
    }
    return len;
}
console.log(strLen(str));
复制代码

• URL编码

// 编码过程

// encodeURI:用于转码整个URL，它会将元字符和语义字符之外的字符都进行转义
   encodeURI('http://www.example.com/q=春节')
// "http://www.example.com/q=%E6%98%A5%E8%8A%82"

// encodeURIComponent:会转码除了语义字符之外的所有字符，包括元字符
   encodeURIComponent('http://www.example.com/q=春节')
// "http%3A%2F%2Fwww.example.com%2Fq%3D%E6%98%A5%E8%8A%82"
// 解码过程
// decodeURI()
// decodeURIComponent()
复制代码

• 日期对象
  • getTime():返回实例距离1970年1月1日00:00:00的毫秒数
  • getDate():返回每个月的几号，从1开始
  • getDay(): 返回每周的星期几取值为：0-6
  • getFullYear(): 返回四位数的年份
  • getMonth(): 返回月份取值为0-11
  • getHours(): 返回小时，取值为0-23
  • getMinutes(): 返回分钟0-59
  • getSeconds(): 返回秒数 0-59
  • getMilliSeconds: 返回毫秒数，取值为：0-999
• 获取屏幕可视区域的宽度和高度，会随着屏幕的宽度变化的

// IE6+支持的属性
var screenW = document.documentElement.clientWidth;
var screenH = document.documentElement.clientHeight;

// IE9+支持的属性
var screenW = window.innerWidth;
var screenH = window.INnweHeight;

// 低版本的Chrome支持的属性
 var screenW = document.body.clientWidth;
 var scrrenH = document.body.clientHeigt;
复制代码

• offset家族

// offset获取元素的宽度和高度
// offset = 边框 + 内边距 + 内容；是不包括外边距的
// offsetWidth和style.width之间的区别：
// 1.style.width只能获取到写在行内的样式，如果是写在style中的是获取不到的,只包含内容的区域，不包含边框和内边距的距离
// 2.offsetWidth获取到的是number类型的，style.width获取到的是string类型的
// 3.offsetWidth是只读属性是不能改变盒子大小的，而style.width是可以改变盒子大小的
// 4.offsetWidth是可以获取到行内的样式也是可以获取到样式表中的样式

// offsetLeft和offsetTop
offsetLeft: 获取距离定位父盒子左边的距离，如果没有定位属性获取到的是距离body的距离
offsetTop: 获取距离定位父盒子上边的距离
offsetParent: 返回盒子带有定位属性的父级标签，可能是父亲标签也可能是爷爷标签
复制代码

• 事件对象

// 1. 兼容写法： var e = event || window.event;
// 2. e.screenX || e.screenY 获取光标距离电脑屏幕左边和上边的距离
// 3. e.pageX || e.pageY 获取光标点击位置距离浏览器页面左边和上边的距离包括被卷进去的页面尺寸
// 4. e.clientX || e.clientY 获取光标点击位置距离浏览器的宽度和高度
// 5. e.target: 该事件被传送到的位置，例如点击div拿到的值就是div标签
// 6. e.type: 获取到的是事件的类型
复制代码

• 避免选中问题：window.getSelection ? window.getSelection().removeAllRanges : document.selection.empty;兼容IE的写法
• window.getSelection()获取鼠标划去部分的起始位置到结束位置，返回一个selection对象
• scroll家族

// 1.IE9+和最新的浏览器
window.pageXOffset;(scrollLeft)
window.pageYOffset;(scrollRight)
// 2.Firefox浏览器
document.documentElement.scrollTop;
document.documentElement.scrollLeft;
// 3.chrome浏览器
document.body.scrolltTop;
document.body.scrollLeft；
// 封装获取的头部滚动距离和左边滚动距离
function scroll(){
    if(window.pageXOffset !== null){//IE9+和最新的浏览器
        return {
            left: window.pageXOffset;
            top: window.pageYOffset;
        }
    }else if(document.compatMode === 'CSS1Compat'){//IE678
        return {
            left: document.documentElement.scrollLeft;
            top: document.documentElement.scrollTop;
        }
    }else{//未声明DTD模式的浏览器
        return {
            left: document.body.scrollLeft;
            top: document.body.scrollTop;
        }
    }
}
复制代码

• 瀑布流布局
  • 每一个小盒子的宽度是固定的，高度是不固定的
  • 根据屏幕宽度和小盒子宽度计算出列数
  • 设置父盒子居中显示
  • 计算出高度数组，遍历所有子元素，更新高度数组
• HTML的 Doctype 作用 ? 严格模式与混杂模式如何区分？它们有何意义 ?
  • 声明位于文档的最前面，处于html标签之前，用来告诉浏览器的解析器，用什么文档类型规范来解析这个文档
  • 严格模式的排版和js运作模式是以该浏览器支持的最高标准运行，在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
  • DOCTYPE不存在或者格式错误，会导致页面以混杂模式显示
• border的基本使用注意事项：

// html
<div id="demo"></div>
// css
<style>
    #demo{
        width: 100px;
        height: 100px;
        background-color: #fff;
        border: 2px solid #000;
        position: relative;
    }
    #demo:after, #demo:before{
        border: solid transparent;
        content: '';
        height: 0;
        width: 0;
        position: absolute;
        left: 100%;
    }
    #demo:after {
        border-width: 10px;
        border-left-color: #fff;// 注意这地方只是给边框的左边设置了颜色
        top: 20px;
    }

    #demo:before {
        border-width: 12px;
        border-left-color: #000;
        top: 18px;
    }
</style>
复制代码

• js异步编程的集中方式
  • 回调函数
  • 事件监听
  • 发布和订阅：事件完全可以理解为信号，如果存在一个信号中心，某个事件任务完成就向信号中心发送一个信号，其他事件任务可以向信号中心订阅者这个信号，从而知道什么时候自己可以开始执行，这种模式也叫作观察者模式，或者发布/订阅模式。
  • Promise对象

转载于:https://juejin.im/post/5c91dd415188252d5404ae08