2021-07-15

BOM：browser object model 浏览器对象模型

-navigator 获取浏览器信息

// 获取浏览器的名称
console.log( navigator.appName ); 
// 获取浏览器内核名称
console.log( navigator.appCodeName );
// 浏览器版本
console.log( navigator.appVersion );
// 浏览器的用户信息
console.log( navigator.userAgent );

-location 操作浏览器地址栏

// 获取地址栏的地址
// console.log( location.href );
// // 地址栏：协议:// 域名 端口号 文件路径 数据 锚点
// // 获取地址栏的数据
// console.log(location.search);
// // 获取锚点
// console.log( location.hash );

// 设置地址栏地址 - 跳转
// location.href = "http://www.baidu.com";

// 地址跳转方法
// location.assign('http://www.qq.com')

// 将旧地址换成新的地址
// location.replace('http://www.163.com')

// 刷新当前页面
// location.reload()

-history 操作浏览器历史记录

// 后退一个页面
history.back()
// 前进一个页面
history.forward()
// 后退/前进 多个页面
history.go(数字)
// 数字是正数，前进，数字是负数，后退

-setInterval(函数,毫秒数) 定时器

function fn(){
    console.log(1);
}
var a = setInterval(fn,1000)
console.log(a); // 定时器的返回值，代表当前页面中第几个定时器
// 停止定时器：clearInterval(定时器的返回值)
clearInterval(a);

延迟一段时间执行一次 - setTimeout(函数,毫秒数)
停止定时器：clearTimeout(定时器返回值)

DOM：document object model 文档对象模型

-html基本结构的操作

// html - document.documentElement
console.log( document.documentElement );
console.log(document);

// body - document.body
console.log(document.body);

// head - document.head
console.log(document.head);

// title - document.title
console.log(document.title);

-获取标签
通过id名获取到标签：document.getElementById("id名")

var btn = document.getElementById('btn')
console.log(btn);
//输出对象的形式
console.dir(btn);

通过标签名来获取：document.getElementsByTagName('标签名')

var btn = document.getElementsByTagName('button')
console.log(btn);
// 获取到的是一个伪数组，需要取下标获取到具体的那一个标签
console.log(btn[0]);

通过class类名来获取元素：document.getElementsByClassName('类名')

// 这种选择方式在低版本ie中不兼容 - ie8及其以下
var box = document.getElementsByClassName('box')
console.log(box);

通过name属性来获取：document.getElementsByName('name属性的值')

var text = document.getElementsByName('username')
console.log(text);

css选择器：document.querySelector(css选择器)

var box = document.querySelector('div.box')
console.log(box);

选择满足css选择器的所有元素：document.querySelectorAll(css选择器)

var boxes = document.querySelectorAll('.box')
console.log(boxes);

-内容操作

// 获取标签
var oDiv = document.querySelector('.box')
// console.log(oDiv);

// 获取标签中的内容 - 标签对象的属性：innerText - 只能操作文本，不能解析标签
// console.log( oDiv.innerText );

// 设置标签中的内容 - 给标签对象的innerText属性赋值即可
// oDiv.innerText = '你好';

// 设置带标签的内容 - innerHTML
 oDiv.innerHTML = '<b>你好</b>';

// console.log( oDiv.innerHTML );

// innerText和innerHTML只针对双标签

操作表单元素的内容

//获取表单元素的内容 - 表单元素.value
var oInput = document.querySelector('[name="username"]')
console.log(oInput);
console.log( oInput.value );
oInput.value = '张三';

-属性操作

// 获取标签
var box = document.querySelector('.box')
// 属性添加 - 标签元素.setAttribute('属性名','属性值')
 box.setAttribute('name','aa')
// 获取属性的值 - 标签元素.getAttribute('属性名')
var boxValue = box.getAttribute('class')
console.log(boxValue);
// 删除属性的值 - 标签元素.removeAttribute('属性名')
box.removeAttribute('name')
// 用.的操作，是在对象中，除非console.dir才能看到
box.name = 'aa'
console.dir(box)

-设置样式

var box = document.querySelector('.box')
box.onclick = function(){
    // 设置背景 - 标签对象.style.css属性 = css值
    // css属性包含连字符，换成小驼峰命名
    box.style.backgroundColor = '#0f0';