愿你坚持不懈,努力进步,进阶成自己理想的人

—— 2017.09, 写给3年后的自己

Javascript学习总结——浏览器相关操作

1、目前市面上主流的浏览器有:

  • IE系列,IE10开始支持ES6
  • Chrome(Webkit内核),支持ES6
  • Safari(Webkit内核),从6.1版本开始支持ES6
  • Firefox(Gecko内核+OdinMonkey JS引擎)
  • 移动设备,Android和iOS浏览器均是webkit内核,对ES6支持较好

2、浏览器对象

  1. window对象:充当全局作用域,同时表示浏览器窗口(IE<=8不支持)
  • window.innerWidthwindow.innerHeight,网页的净宽、高
  • window.outerWidthwindow.outerHeight,窗口的宽、高
  • 对于IE<=8的hack:var width = window.innerWidth || document.body.clientWidth
  1. navigator对象:获取浏览器的信息
  • navigator.appName 浏览器名称
  • navigator.appVersion 浏览器版本
  • navigator.language 浏览器设置的语言
  • navigator.platform 操作系统类型
  • navigator.userAgent 获取用户代理
  1. screen对象:获取显示器信息
  • screen.width 返回如:1980
  • screen.height 返回如:1080
  1. location对象,获取URL信息(如:https://127.0.0.1/javascript/index.html#hello)
  • location.hash,获取锚的值,如“#hello”
  • location.host,得到127.0.0.1
  • location.href,获取完整的URL信息
  • location.pathname,获取路径信息,如:/javascript/index.html
  • location.search,获取查询字符串
  • location.reload(),重新加载当前页面
  • location.assign(),加载一个新页面
  1. document对象,获取文档信息,修改DOM等……
  • document.title,浏览器标题
  • document.cookie,浏览器COOKIE(当服务器设定httpOnly的时候,cookie将不能被Javascript读取)
  1. history对象:浏览器的历史记录信息
  • history.back(),相当于后退按钮
  • history.forward(),相当于前进按钮

3、操作浏览器DOM

  1. 获取节点
  • document.getElementById(),ID是唯一的,故节点也是唯一的,注意element后无“s”
  • document.getElementsByTagName(),通过标签名获取一组节点,element后有“s”
  • document.getElementsByClassName(),通过class名获得节点,element后由“s”
  • 使用selector语法,用document.querySelector()document.querySelectorAll()

这里的DOM节点是指Element,但DOM节点实际上是Node(包括ElementComment
CDATA_SECTION

  1. 更新DOM
  • elemObject.innerHTML,返回/修改DOM的文本内容(可以是HTML文本),如果HTML是通过网络得到,要注意编码以防XSS攻击
  • elemObject.innerText,返回/修改纯文本,不返回隐藏元素的文本,而elemObject.textContent可以返回所有文本(IE<9不支持)
  • elemObject.style修改CSS,但是CSS属性应该改写为驼峰式(如font-size改为fontSize)
  1. 插入DOM
  • 把一个子节点添加到父节点末尾,用parentElement.appendChild(),但是对于已存在的节点,会把原节点直接移动进去,从原来位置消失,挪到父节点末尾,如:
<p id="js">Javascript</p>
<div id="list">
  <p id="PHP">PHP</p>
</div>

执行以下js代码后:

var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js);

变成了:

<div id="list">
  <p id="PHP">PHP</p>
  <p id="js">Javascript</p>
</div>
  • 如果要从无到有插入一个新节点,则如下:
var newNode = document.createElement('p');
newNode.id = "python";
newNode.innerText = "Python";
list.appendChild(newNode);

HTML也相应地,变成了:

<div id="list">
  <p id="PHP">PHP</p>
  <p id="js">Javascript</p>
  <p id="python">Python</p>
</div>
  • parentElement.insertBefore(newElement, referenceElement),用来把newElement插到referenceElement前面,如:
var php = document.querySelector("#PHP");
list.insertBefore(js, php);
  1. 删除DOM
  • 删除一个节点,首先需要获得父节点和节点本省,然后调用父节点的removeChild来删除自己,如:
var list = document.getElementById('list');
var python = document.getElementById('python');
list.removeChild(python);
  • parent.children是一个只读属性,会随着DOM的改变而改变,每一次操作都应该基于每一次DOM改变后的情况来考虑
  1. 操作表单
  • 读写text文本框的值,document.getElementById('email').value,但是对于radio、checkbox获得的则是预设的文本值,还要通过.checked来判断是否选中
  • form.submit()可以提交表单,但最好用<form onsubmit="return check()">的形式
  1. 操作文件
  • <input type="file" />可以实现文件上传,但是form中的enctype要设为multipart/form-data,且method应该为post,但是受限于JS,对控件对象的value属性赋值是没有效果的,也不能获得该文件的真实路径
  • File API,增强了文件操作的功能:
<img src="" id="img" />

<form>
  <input id="file" type="file" />
</form>

<script type="text/javascript">
var file = document.getElementById('file');
var img = document.getElementById('img');

file.addEventListener('change', function() {
  img.src = "";
  if(file.value) {
    var fileObject = file.files[0];
    var info = `文件名:${fileObject.name},大小:${fileObject.size},修改${fileObject.lastModifiedDate}`;

    console.log(info);

    if(["image/png", "image/gif", "image/jpeg"].indexOf(fileObject.type) == -1) {
      alert("不是有效的图片文件!");
    } else {
      var reader = new FileReader();
      reader.onload = function(e) {
        var data = e.target.result;
        img.src = data;
      }
      reader.readAsDataURL(fileObject);
    }
  }
});
</script>