JS学习篇之操作浏览器、DOM

浏览器

浏览器内有很多对象，可以获取浏览器的相关信息

window

常用属性

• innerWidth：窗口宽

• innerHeight：窗口高

navigator

常用属性

• navigator.appName：浏览器名称；
• navigator.appVersion：浏览器版本；
• navigator.language：浏览器设置的语言；
• navigator.platform：操作系统类型；
• navigator.userAgent：浏览器设定的User-Agent字符串。

appName = Netscape
appVersion = 5.0 (X11)
language = zh
platform = Linux x86_64
userAgent = Mozilla/5.0 (X11; Linux x86_64; rv:75.0) Gecko/20100101 Firefox/75.0

screen

screen对象表示屏幕的信息，常用的属性有：

• screen.width：屏幕宽度，以像素为单位；
• screen.height：屏幕高度，以像素为单位；
• screen.colorDepth：返回颜色位数，如8、16、24。

location

表示当前页面的URL信息，如

//URL
'http://www.example.com:8080/path/index.html?a=1&b=2#TOP'

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

location.assign(): 可以加载页面，参数是URL地址

location.reload(): 重新加载当前页面

document

代表当前页面，因为DOM表示为树形结构，而document就是DOM的根节点

getElementById()：通过HTML ID获取节点

getElemenstByTagName()：通过标签名获取节点

getElementsByClassName()：通过css选择器获取节点，返回一个组

firstElementChild：获取某节点下第一个节点

lastElementChild：获取某节点下的最后一个节点

cookie：获取cookie（cookie是服务器用来判断用户的）

querySelector()：参数形式’#id’,’.class’…其实就是css选择器形式的参数，找到一个就返回

querySelectorAll：返回所有满足条件的

class和selectorall会返回一个类数组，可以使用[…nodeList]转换成数组（进而使用map，reduce..）

参考文献

MDN-NodeList

DOM

通过doument对象取得元素，可以进行更新，修改，删除操作

更新

innerHTML：比较强大，既可以修改内容，也可以修改子树（子标签）

p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';

innerText&textContent：只修改内容，里面的标签会自动转码区别是innerText不返回隐藏元素的文本

p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id">&lt;script&gt;alert("Hi")&lt;/script&gt;</p>

所有的css属性都对应到了DOM的style属性里，css属性名在DOM里是驼峰命名

p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

插入

要在某个DOM节点插入，如果这个节点是空的，可以采用innerHTML，他会直接覆盖这个节点下的内容

appendChild(newElement)将某节点添加到子该DOM节点的最后一个节点（如果这个节点在前面存在会删除前面的）

var d = document.createElement('style');// 创建一个新节点
d.setAttribute('type', 'text/css'); // 设置属性
d.innerHTML = 'p { color: red }';  // 内容
document.getElementsByTagName('head')[0].appendChild(d); // 插入点

parentElement.insertBefore(newElement, referenceElement);可以将节点添加到指定为位置

parentElement.children可以得到该节点下的所有子节点，配合insetBefore使用

删除

首先获取节点，然后获取父节点，使用父节点来删除子节点

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

并没有完全删除，还在内存中

注意删除后的节点会变化

操作表单

常用输入控件

• 文本框，对应的<input type="text">，用于输入文本；
• 口令框，对应的<input type="password">，用于输入口令；
• 单选框，对应的<input type="redio">，用于选择一项；
• 复选框，对应的<input type="checkbox">，用于选择多项；
• 下拉框，对应的<select>，用于选择一项；
• 隐藏文本，对应的<input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。

H5新控件

<input type="date" value="2015-07-01">
<input type="datetime-local" value="2018-06-12T19:30">
<input type="color" value="#ff0000">
...

不支持的浏览器会把他们当作type='text'处理，支持的就会得到一串格式化的字符

获取控件值和修改值

对于text、password、hidden、select文本框，直接调用value就可以得到输入值；对于checkbox、redio单选框和复选框，调用value出现默认值，调用checked返回布尔值，代表选择情况

// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false

修改的话直接修改value就可以了，单选框和复选框修改checked

提交表单

• form.submit()这个方法代表提交

• 响应type='submit'

  <!-- HTML -->
  <form id="test-form" onsubmit="return checkForm()">
      <input type="text" name="test">
      <button type="submit">Submit</button>
  </form>
  
  <script>
  function checkForm() {
      var form = document.getElementById('test-form');
      // 可以在此修改form的input...
      // 继续下一步:
      return true;// false代表不提交
  }
  </script>

操作文件

H5中上传文件的控件是<input type='file'>

<!-- form属性必须如下设置 -->
<form method="post" enctype="multipart/form-data">
 <div>
   <label for="file">Choose file to upload</label>
   <input type="file" id="file" name="file" multiple>
 </div>
 <div>
   <button>Submit</button>
 </div>
</form>

以前JS对于文件的操作有限，无法读取文件的内容
现在的H5新增了的APIFile和FileReader可以获取文件信息和读取文件，下面是一个简单的例子

选择上传图片

提交到服务器

源码

<form method="post" enctype="multipart/form-data">
    <div id='file-wrapper'>
        <label for="image">选择上传图片</label>
        <input type="file" id="image" name="image" value='test' multiple>
        <p id='info'></p>
        <div id='image-preview'
             style="display:none; width: 100%; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: left; ">
        </div>
    </div>
    <div>
        <button>提交到服务器</button>
    </div>
</form>
<script>
    var
    fileInput = document.getElementById('image'),
        info = document.getElementById('info'),
        preview = document.getElementById('image-preview');
    // 监听change事件:
    fileInput.addEventListener('change', function () {
        preview.style.display = 'block';
        // 清除背景图片:
        preview.style.backgroundImage = '';
        // 检查文件是否选择:
        if (!fileInput.value) {
            info.innerHTML = '没有选择文件';
            return;
        }
        // 获取File引用: 
        var file = fileInput.files[0];
        // 获取File信息:
        info.innerHTML = '文件: ' + file.name + '<br>' +
            '大小: ' + file.size + '<br>' +
            '修改: ' + file.lastModifiedDate;
        if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
            alert('不是有效的图片文件!');
            return;
        }
        // 读取文件:
        var reader = new FileReader();
        /* 
        	回调函数，当文件读取完后自动执行这个函数
        
        */
        reader.onload = function (e) {
            var
            data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'            
            preview.style.backgroundImage = 'url(' + data + ')';
        };
        // 以DataURL的形式读取文件:
        reader.readAsDataURL(file);
    });
</script>

​