DOM | 青训营笔记

海贼王
105 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的的第13天

BOM包含DOM

window    根节点

winodw.document    文档 DOM的根节点

window.location    本地

window.history    历史

window.screen    屏幕

window.navigator    导航信息

Location

location.href   既可以跳转也可以获取地址

location.assign   仅仅作为跳转使用

location.replace   不产生历史

location.hash   地址栏#后面的锚点内容

location.search   地址栏中?后面的内容/

location.hostname/location.port

location.pathname   可设置或返回当前URL的路径部分

location.protocol   可设置或返回当前URL的协议

location.reload(true)   不经过浏览器缓存强制从服务器重载

history

history.back()   回退

history.forward   前进

history.go(0)   刷新

history.go(1)   前进一个页面

history.go(-1)   后退一个历史记录

history.pushState   添加历史记录

history.replaceState   修改历史记录

screen

screen.width , screen.height   屏幕宽高

screen.availWidth , screed.availHeight   不包含任务栏的宽高

navigator

navigator.userAgent   当前浏览器信息(浏览器内核)

** DOM** w3c标准化之前的dom模型，称为，遗留dom，也叫0级dom

0级dom中，主要通过标签取得元素 例如document.forms 获取所有表单 console.log(document.forms); // 返回HTMLCollection集合 哪怕就一个 也是集合

// 通过标号取某一个 console.log(document.forms[0]); // 如果表单经过命名 还可以通过名字取得 console.log(document.forms.login);

伪数组对象 dom查询返回HTMLCollection对象有编号和length属性，它类似数组，但不是数组，称为伪数组对象

// 伪数组如果希望能够向真正意义上的数组使用，可以被转化 // 手动实现伪数组 转化 成 真数组

var arr = Array.from(obj);

w3c标准化之后 提供了专门的接口方法 用来查询页面中的元素，类似scc获取元素

创建节点

节点有8中类型，常见的有

元素节点，指页面中的标签 element

文本节点，页面的文本内容 每个内容都有属于自己的节点

属性节点，标签的属性也视作一个节点

只要是节点 就可以按照节点对象来进行操作

js除了能查询页面已有的元素和节点外，还可以手动创建节点，插入页面元素中


 // 创建元素节点
        var p = document.createElement("p");
        console.log(p);
        
        // 创建内容节点
        var cont = document.createTextNode("hello world");
        console.log(cont);
        p.appendChild(cont); // 将文本放入标签内
        console.log(p);
        
        // 创建属性节点
        var attr = document.createAttribute("align");
        attr.value = "center";
        p.setAttributeNode(attr); // 给标签设置属性
        console.log(p);
   
        // <p align="center">hello world</p>
        // 将创建好的内容 放入页面
        document.body.appendChild(p); // 在body最后插入
avatar
文章
阅读
粉丝