JS web api Bom_dom

web api

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

1.DOM

根据id
var divs = document.getElementById(‘main’);
根据标签名
var divs = document.getElementsByTagName(‘div’);
根据name名
var inputs = document.getElementsByName(‘hobby’);
根据类名获取元素
var mains = document.getElementsByClassName(‘main’);
根据选择器获取元素 返回所有的第一个
var text = document.querySelector(’#text’);
返回所有的满足条件的对象
var elements = document.querySelectorAll(’.a’);

点击事件mains.οnclick=function (){
}

获得焦点事件 txtSearch.onfocus = function () {}
失去焦点事件 txtSearch.onblur = function () {}

1.1非表单的属性

href、title、id、src、className style innerHTML innerText

a标签防止跳转， 在点击事件中 return false

innerHTML 获取内容的时候，如果内容中有标签，会把标签页获取到
innerText 获取内容的时候，如果内容中有标签，会把标签过滤掉

// 都会把标签过滤
// 前后的空白和一些换行去掉
console.log(box.innerText);
// 原封不动的把内容输出
console.log(box.textContent);

1.2表单元素属性

• value 用于大部分表单元素的内容获取(option除外)
• type 可以获取input标签的类型(输入框或复选框等)
• disabled 禁用属性 bool类型 disabled=true
• checked 复选框选中属性 bool类型 checked =true
• selected 下拉菜单选中属性 bool类型 selected =true

自定义的属性

获取自定义属性的值
box.getAttribute(‘age’)

设置自定义属性的值
box.setAttribute(‘sex’, ‘male’);

删除自定义属性
box.removeAttribute(‘id’);

// 获取自定义属性的值 getAttribute()
    // console.log(box.getAttribute('age'));
    // console.log(box.getAttribute('personId'));

    // 设置自定义属性
    // box.setAttribute('sex', 'male');
    // box.setAttribute('class', 'test');

    // 移除属性 
    box.removeAttribute('age');
    box.removeAttribute('id');

节点

了解节点相关的属性 nodeName nodeType nodeValue

节点类型：元素节点、文本节点、注释节点、属性节点

父子节点 parentnode childrennode
获取元素的子元素 node.children
获取第一个子元素 node.firstElementChild node.lastElementChild

动态创建元素

document.write() 输出内容，会把之前的整个页面覆盖掉

element.innerHTML 直接将带标签的字符串赋值给它