JavaScript--DOM介绍及应用

DOM

DOM 全称 document object model 文档对象模型 操作 html

html文档由 html+css 组成 DOM利用js操作 html+css的

操作元素节点 element Element 元素节点对象

查 获取元素节点的方式

通过选择器获取

id选择器

通过id属性来获取元素 里面的参数为 string类型的id 返回值是一个htmlElement
var box = document.getElementById("box");  //获取id值为box的元素
console.log(box);

class选择器

通过class属性名来获取对应的元素 他传入的参数为string类型的class名字
返回值是一个htmlCollectionof<Element>返回的是一个集合 这个集合里面存储了Element
htmlCollection是类似数组的一种结构  具备下标同时具备length属性 可能会有多个数据
但是htmlCollection 并不是一个数组 他不具备数组的方法 只是存在对应的下标和length属性

var content = document.getElementsByClassName('content')
console.log(box);

所以我们可以通过下标来获取对应的htnmlCollection里面的元素
 console.log(content[0]);

标签选择器

里面传入的是一个标签名字的string字符串 返回的也是一个htmlCollection
var div = document.getElementsByTagName('div')
console.log(div); // 这里是一个htmlCollection

通过下标来进行获取里面的元素
console.log(div[0]);

通过name值来获取

返回的类型是一个nodeList nodeList不是htmlCollection
但是他同样具备对应的下标和length属性 他的方法比htmlCollection要多

nodeList 和 htmlCollection的区别

var divName = document.getElementsByName('divName')
console.log(divName);
console.log(divName[0]);

返回所有匹配选择器的元素  接收的是一个nodeLis

var selecAll = document.querySelectorAll('content')
console.log(selecAll);
console.log(selecAll[0]);

操作属性节点 attribute Attr属性节点对象 设置属性节点

element 内置的属性 element.属性名
var box = document.getElementById('box') //获取id值为box的元素
//className
console.log(box.className); //返回class名字 同样我们可以进行辅助 set元素属性
box.className = 'jack' //设置class属性名
//id
console.log(box.id); //获取id名字
box.id = 'rose'
//title
console.log(box.title); //获取title名字
box.title = '刘德华'
//style 样式操作 element.style.样式名
box.style.background = 'red' //给背景颜色赋值为红色
console.log(box.style.background); //获取背景颜色

操作文本节点 text Text文本节点对象 设置文本节点

innerText 获取显示的文本  赋值就是设置对应的文本
console.log(box.innerText); //获取里面显示的文本（忽略标签）
box.innerText = '睡了吗' //覆盖之前里面的所有内容
box.innerText = '<b>吃了没</b>' //设置文本   是不会解析里面的标签的
innerHTML 获取显示的html内容  赋值就是设置对应的html内容
console.log(box.innerHTML); //会将里面所有的html代码全部获取
box.innerHTML = '<b>哈拉少</b>' //他会解析里面的b标签  显示为html加粗效果

location方法

document(核心): 文档对象，让我们可以在js脚本中直接访问页面元素(DOM)

history(重要): 历史对象,包含窗口的浏览历史，可以实现后退

location(重要): 包含浏览器当前的地址信息，可以用来刷新本页面或跳转到新页面

frames: 框架对象，可以获取页面框架内容

screen: 包含有关客户端显示屏幕的信息

navigator: 导航对象, 包含所有有关访问者浏览器的信息(浏览器版本信息等 最新版本的浏览器是不支持的)

console.log(window.location); //也可以window.
console.log(location);

location的属性

console.log(location.hash);//返回锚点 有就返回锚点值 没有就是空 

console.log(location.host); //主机地址 访问的地址 www.baidu.com /14.215.177.39

console.log(location.hostname); //主机名 www.baidu.com

console.log(location.href); //链接地址 // https://www.baidu.com

console.log(location.port); //端口号 //默认的浏览器占用端口80 /地址栏没有显示端口就没有端口

console.log(location.protocol); //协议名 https http（默认的）file协议

console.log(location.pathname); //路径名 拿到访问地址后的路径地址/主机名或端口号后面的资源路径地址
console.log(location.search); //用来接收?传递值 获取?后面的信息

console.log(location.origin); //跨域信息

通过地址栏来进行页面跳转 给href赋值

location.href = 'http://www.baidu.com'

通过assign方法来跳转页面 传入的参数是你需要跳转的页面

location.assign('http://www.taobao.com')

reload方法 重新加载

location.reload() //默认会从缓存中加载 （速度会更快）
location.reload(true) //去服务器端加载

跳转页面 他会移除当前页面在历史记录里面 历史记录只会存在一个就是跳转好的

替换本身的地址来完成跳转 同时删除本身的历史记录

location.replace('http://www.7k7k.com')

history

histroy是历史对象 保存历史页面

<a href="./history01.html">去新的页面</a>
<button οnclick="fn()">前进</button>
<button οnclick="fn1()">后退</button>
<button οnclick="fn2()">跳转到第一个历史页面</button>

<script>
        console.log(history);
        function fn(){
            history.forward() //前进的方法
        }
        function fn1(){
            history.back() //后退的方法
        }
        function fn2(){
            // 默认自己这页是0 -1 -2(后退)   1 2（前进）
            history.go(2) //去任意历史页面
        }
        // 添加的状态值 取出来的话 history.state
        //添加一个数据（可以是任意类型） 添加的数据 会存入state
        //添加一个历史记录 第一个参数为数据 第二个参数为标题 第三个参数为url地址（可以省略）（必须要和本身具备相同的orgin值）
        history.pushState('hello','hello')
        //替换state值 在对应的url
        history.replaceState('world','world') 
</script>

navigator

导航对象 用来获取浏览器的相关信息

console.log(navigator.appName);//浏览器名称

console.log(navigator.appVersion);//浏览器版本

console.log(navigator.platform);//操作系统

//重点 用户代理信息 里面存放了用户的系统版本浏览器及相关的信息
console.log(navigator.userAgent);

// screen获取用户屏幕信息
console.log(screen.availHeight);//屏幕高
console.log(screen.availWidth);//屏幕宽