javascript基础(四)--(BOM,DOM)

发表于 | 分类于
| 字数统计: 4k 字

DOM（Document Object Model）（文档对象模型） 定义了用于访问文档的标准, 允许程序和脚本动态访问和更新文档的内容、结构和样式。BOM（borwser Object Model）（浏览器对象模型） 使用对象描述了浏览器的各个部分的内容。DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。

BOM(Browser Object Model) 浏览器对象模型

window对象 窗口本身 BOM模型中的顶层对象

1
2
3
4
5
6
7
8
9
10
11
12
// window尺寸兼容获取方法 (不包括工具栏和滚动条)
var w=window.innnerWidth(标准浏览器)||document.body.clientWidth(IE5678)||
document.documentElement.clientWidth
window.open()  // 在新窗口打开空白页面
// window.open(url, target, setting, boolean)
// 参数1：要加载的URL   参数2：窗口目标   参数:3：新目标窗口的一些设置  参数4：是否取代浏览器历史记录
window.open("http://www.baidu.com") // 在新窗口打开指定网页(默认为新窗口打开)
window.open("http://www.baidu.com",'_self') // 在自身窗口打开指定页面
window.open("http://www.baidu.com",'name','width=320,height=480') // 在自身窗口打开指定页面
window.close() // 关闭窗口  基本不用
window.moveTo() // 使窗口移动到制定位置
window.resizeTo()  // 使窗口尺寸改变指定大小

①window.navigator.userAgent 获取操作系统的版本,浏览器版本/类型的信息
②window.navigator.appName 返回浏览器的名称
③window.navigator.cookieEnabled 返回指明浏览器中是否启用cookie的布尔值
④window.navigator.paltform 获取用户所使用的操作系统

History对象

①window.history.length 返回浏览器历史列表中的url数量
②window.history.back() 加载 history 列表中的前一个 URL
③window.history.forward() 加载 history 列表中的下一个 URL
④window.history.go(-num) 加载 history 列表中的某个具体页面

location对象

①window.location 返回当前文档的URL
②window.location.href="http://www.baidu.com" 跳转页面
②window.location.assign('http://www.baidu.com') 跳转页面
③window.loaction.reload() 刷新当前页面
④window.loaction.search 返回地址栏中?后面的参数
⑤window.location.hash 返回地址栏中的hash值

screen对象

①window.screen.width 返回显示器的宽度
②window.screen.height 返回显示器的高度
③window.screen.availHeight/availWidth 有效宽度或高度去除任务栏

document对象

包含了页面中的可见内容,由html标签对象节点构成对象树树根就是document
1.可视区尺寸
document.documentElement.clientWidth
document.documentElement.clientHeight
2.滚动距离
document.documentElement.scrollTop||docuemnt.body.scrollTop
3.文档高度
document.documentElement.offsetHeight
document.body.offsetHeight (IE)

DOM (Document Object Model) 文档对象模型 整个页面结构

DOM对象属性

1.document.cookie 设置或返回与当前文档有关的所有cookie
2.document.title 当前文档的标题
3.document.URL 当前文档(页面)的完整URL(地址栏显示的URL)
4.document.domain 获取域名
5.document.referrer 连接到当前页面的那个页面的URL
6.document.documentElement 获取html对象
7.document.body 获取body对象
8.document.body.innerHTML 获取body内容

1
2
3
4
5
6
ex:var t = document.title // 获取title
console.log(t)  //字符串的练习
document.title = '字符串' // 设置title
console.log(document.title)   //字符串
var u = document.URL
console.log(u)   //file:///C:/Users/Administrator/Desktop/1.html

获取DOM对象的方法

  1. document.getElementById('test1') 按ID找 返回值是单个对象 多个相同ID时只返回第一个
  2. document.getElementsByTagName('p')[0] 必须加方括号下标明确那一个对象
    document.getElementsByTagName('p')[1].style.background="green"
    按标签找 返回值是对象的集合(数组) 即使只找到一个也包装成对象的集合
    document.getElementsByTagName()
    动态方法 可以动态获取元素,获取动态的NodeLists,改变dom结构会影响Nodelists
  3. document.querySelectorAll() 返回所有匹配到的元素NodeList集合，没匹配到返回空的NodeList
    静态方法 获取静态的Nodelist,改变相关的node不会改变静态的nodelist,这个对象必须在获取的时候被创建出来
    在动态NodeList里return的是一个指针，而静态的NodeList返回时当前的node所有信息。
  4. document.querySelector(CSS选择符) 返回匹配到的第一个元素，没匹配到返回null
  5. document.getElementsByName('username')[0]
    对于表单元素 可以用name来找返回值是对象的集合(数组)
    注:获取表单中输入的数据 document.表单名.表单元素名.value
  6. document.getElementsByClassName('test2')[0] //IE9以下不兼容
    按类名查找 对象的集合(数组)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/*<body>
  <h1>找对象</h1>
  <div id="test1">
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
  </div>
  <div class="test2">class test2</div>
  <input type="text" name="username" value="bob" />
</body>*/
//获取class   兼容ie9以下
var body = document.getElementsByTagName('body')
var con = getByClass(body[0],'con')
console.log(con[0].className)
function getByClass(oParent,cla){
  var arr = []
  var ele = oParent.getElementsByTagName('*')
  var re  = new RegExp('\\b'+cla+'\\b') //独立部分
  for(var i=0;i<ele.length;i++){
    if(re.test(ele[i].className)){
      arr.push(ele[i])
    }
  }
  return arr
}

操作对象的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<img src="" alt="" title="" style="width:200px;height:200px;"  />
img对象的属性  img.src  img.alt img.title img.style
普通属性的读取  对象.标签属性
普通属性的改值  对象.标签属性 = "值"
获得元素的自定义属性  getAttribute('alt')
设置元素的自定义属性  setAttribute('abc','hao')
移除元素的自定义属性  removeAttribute('alt')

attributes  属性值集合
getAttribute()   获取节点行间属性的值   setAttribute()   设置行间属性节点的值

自定义属性的设置和获取
obj.attr = "值"
obj.index = i;   //索引值匹配  匹配对应关系

js中允许把 "." 换成 "['']"
obj.style.width = "100px"    // .后面的值无法修改
obj.style[attr] = value      // []后面的值可以随便写

设置样式

对象.style.width = '100px'
对象.style.cssText = 'width:100px;height:100px' 只会修改行内的样式 后写的覆盖前面的

获取样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 行间样式的获取 CSS属性的访问
oBox.style.width // 只能获取行间样式
// 操作class要用className    obj.className
// 如果修改元素的float属性
obj.style.styleFloat = "left";  (IE)
obj.style.cssFloat = "left";  (非IE)
// 如果css属性带有横线则把横线去掉后的字母大写 obj.style.marginLeft
// 非行间样式的获取  (得到的是计算后最终的样式)
1.getComputedStyle(oBox,null(伪元素)).width//标准浏览器兼容,IE8以下不兼容
2.oBox.currentStyle.width     //IE6,7,8和opera兼容,其他不兼容
// 兼容写法(不能直接获取复合样式,不要获取未设置的样式)
console.log(getStyle(oBox,'width'));
function getStyle(obj,attr){
  return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
}
注: 属性操作注意事项
  a. 所有的相对路径都别拿来做判断
  b. 颜色值不要拿来做判断 背景图片路径也不能做判断
  c. innerHTML值别拿来做判断
  d. 所有的图片路径不能做判断  但是可以用getAttribute('src')

DOM节点相关操作

  • 节点信息
1
2
3
4
5
6
7
8
9
10
11
12
13
a.nodeName // 节点名称 obj.nodeName
  元素节点和属性节点:标签或属性名称
  文本节点:  永远都是#text
  文档节点:  永远都是#document
b.nodeType   // 节点类型(返回数值) obj.nodeType
  NodeType:节点类型12种(常见有 元素节点 文本节点 属性节点 注释节点)
  元素节点:返回1
  属性节点:返回2
  文本节点:返回3   文字,空格或换行都属于文本节点
  注释节点:返回8
  文档节点:返回9
c.nodeValue   //获取节点的值
  只有属性节点,注释节点和文本节点才有值,元素节点是没有值 返回null(节点值用innerText)
  • 查找节点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
a.子节点
  obj.childNodes // 获取所有子节点 在IE6 7 8只会找到元素节点 而其他浏览器所有节点都会找到
  obj.children // 只会找到元素节点 不存在兼容问题 推荐使用
b.父节点  //obj.parentNode  找元素的父节点
c.兄弟节点
  obj.nextElementSibling  //下一个兄弟节点
  obj.previousElementSibling  //上一个兄弟节点
  obj.nextSiblings      // 取得下一个紧邻的兄弟元素
  obj.previousSiblings  // 取得上一个紧邻的兄弟元素
d. 第一个或最后的节点
  obj.firstElementChild
  obj.lastElementChild
注:nextSibling属性与nextElementSibling属性的差别：
nextSibling返回指定元素节点后下一个兄弟节点(包括文本节点、注释节点即回车、换行、空格、文本)
nextElementSibling属性只返回元素节点之后的兄弟元素节点(不包括文本节点、注释节点)
  • 节点相关操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
A. 创建节点
  document.createElement('标签')
B. 添加节点
  parentNode.appendChild('元素节点')  // 往父节点后面添加一个子节点
  parentNode.insertBefore(新节点,子节点或null) // 在指定子节点前面插入一个节点
  parentNode.insertAfter(新节点,子节点)  //在指定子节点后面插入一个节点
C. 删除节点
  obj.parentNode.removeChild(obj) 先找到对象  再找到其父元素  在删除该对象
D. 替换节点
  parentNode.replaceChild(用来替换节点,被替换节点)  参数必须
C. 克隆节点
  obj.cloneNode(boolean) 默认为false  但不会clone事件
    true: 克隆元素及其包含的子孙节点
    false: 克隆元素但不包含的子孙节点

创建及添加元素节点
var div1=document.createElement('div');
var odiv=document.getElementById("one");
odiv.appendChild(div1);

创建及添加属性节点
var newAttr= document.createAttribute("id");
var odiv=document.getElementById("one");
newAttr.value="newDiv1";
odiv.setAttributeNode(newAttr)

创建及添加文本节点
var div1=document.createElement('div');
var odiv=document.getElementById("one");
var txt=document.createTextNode("文本内容");
div1.appendChild(txt);
odiv.appendChild(div1);
  • innerHTML与innerText
1
2
3
4
5
6
7
8
9
obj.innerHTML="<li>春</li><li>夏</li><li>秋</li>"; //改变标签里的内容
/*
<div id="test"><span>test1</span>test2</div>
*/
test.innerHTML: 包括Html标签和文本内容  // <span>test1</span>test2
test.innerText: 去除Html标签只含文本内容 // test1 test2
test.outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身。//<div id="test"><span>test1</span>test2</div>
注:innerHTML是符合W3C标准的属性,而innerText不适用于firefox浏览器,
// 在火狐中可以使用 test.TextContent 或 test.innerHTML.replace(/<.+?>/gim,'')

  • 动态添加脚本文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    function loadScript (url, cb) {
      var script = document.createElement('script')
      script.type = 'text/javascript'
      script.onload = function () {
        cb && cb()
      }
      script.src = url
      document.body.appendChild(script)
    }
    loadScript('test.js')

  • 动态添加样式文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    function loadStyle (url, cb) {
      var link = document.createElement('link')
      link.rel = 'stylesheet'
      link.type = 'text/css'
      link.onload = function () {
        cb && cb()
      }
      link.href = url
      var head = document.head || document.getElementsByTagName('head')[0]
      head.appendChild(link)
    }
    loadStyle('common.css')

JS 表格和表单的操作

  • 表单的操作
    1.selectedIndex 可设置或返回下拉列表中被选择选项的索引号,若多选则返回第一个被选择的索引号
    obj.options[obj.selectIndex].value 获取选中下拉列表选项的值
    2.focus()获取焦点 select()选中
    3.复选框和单选按钮的onclick事件可以通过checked判断是否被选中
    下拉列表一般用onchange事件遍历所有项通过selected判断是否选中
    注. IE6,IE7,IE8 不支持input类型修改,会报错
    4.document.forms 获取页面中所有的表单

  • 表格的操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
tab.tHead //获取表格头部thead
tab.tFoot //获取表格底部tfoot
tab.tBodies //获取表格主体tbody可以有多个
// tr和td对象的访问
tab.rows //获取表格中的行数tr
tab.rows[0].cells //获取某一行的列数
//通过数组方式更新指定单元格中的数据
tab.rows[1].cells[2].innerHTML="as";
//tr和td对象的创建
tab.insertRow() //为表格新增行
row.insertCell() //为行新增列(参数-1)表示新增在最后面
//tr和td对象的删除
tab.deleteRow() //删除行
tab.rows[0].deleteCell() //删除列

DOM扩展

  • document.activeElement HTML5新增辅助管理DOM焦点的功能

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // document.activeElement // 会始终引用DOM中当前获得了焦点的元素
    // 获得焦点的方式：页面加载、用户输入(Tab)、调用focus()
    // 文档刚刚加载完成时，document.activeElement中保存的是document.body元素的引用 加载期间值为null
    console.log(document.activeElement) // <body>...</body> 加载完成默认是body
    var btn = document.getElementById('btn')
    btn.focus()
    console.log(document.activeElement === btn) // true
    // doucment.hasFocus() // 确认文档是否获得了焦点
    console.log(doucment.hasFocus) // 文档是否获取了焦点 可判断用户是否正在与页面交互

  • classList HTML5新增的操作类名的方式

    1
    2
    3
    4
    obj.classList.add('demo') // add 添加指定的类名 如果已存在就不在添加
    obj.classList.contains('demo') // contains 是否包含给定类名 存在返回true 否则返回false
    obj.classList.remove('demo') // remove 删除给定的类名
    obj.classList.toggle('demo') // toggle 如果已存在给定类名则删除它，如果不存在给定的值则添加给定类名

  • data-xxx HTML5新增自定义数据属性

    1
    2
    3
    // 在标签上添加 data-开头自定义属性 可以通过 元素.dataset.属性获取
    // <div id="mydiv" data-appid = '123' data-name='tew'>
    console.log(mydiv.dataset.appid + '-' + mydiv.dataset.name) // 123-tew

  • ele.scrollIntoView()

    1
    2
    3
    // 滚动浏览器窗口或某个容器元素，使调用元素或获得焦点元素出现在视口中
    // scrollIntoView(true)或scrollIntoView() // 滚动之后会让调用元素顶部与视口顶部尽可能平齐
    // scrollIntoView(false) // 滚动之后会让调用元素尽可能全部出现在视口中 调用元素底部与视口顶部平齐

  • ele.scrollIntoViewIfNeeded()

    1
    2
    3
    4
    // 将不在视口可见区域的元素滚动到视口可见区域，如果已在视口可见区域则不滚动
    // ele.scrollIntoViewIfNeeded() 同 ele.scrollIntoViewIfNeeded(true)
    //    元素将在其所在滚动区的可视区域中居中对齐
    // ele.scrollIntoViewIfNeeded(false)  // 元素将与可视区域最近的边缘对齐

  • contentDocument 框架内容文档对象

    1
    2
    3
    4
    // <iframe id='myIframe'>
    var iframe = document.getElementById('myIframe')
    var iframeDoc = iframe.conetenDocument || iframe.contentWindow.document
    // iframe.contentWindow.document 兼容IE8

try-catch 错误处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
// 把有可能抛出错误的代码都放在try语句块中，而把那些用于错误处理的代码放在catch语句块中
try {
  // 可能会导致错误的代码 try 中的任何代码发生错误就会立即退出执行，然后接着执行catch块
} catch (error) {
  // 在错误发生时的处理
} finally {
  // 无论try或catch执行 finally语句都会执行
}
// 无论执行try或catch finally 都会被执行
try {
  console.log(a)
} catch (err) {
  console.log(err) // ReferenceError: a is not defined
} finally {
  console.log('finally') // finally
}
try {
  var a = 1
  console.log(a) // 1
} catch (err) {
  console.log(err)
} finally {
  console.log('finally') // finally
}
// 只要代码中包含了finally子句，无论try还是catch语句块中的return语句都将被忽略
// 在try还是catch语句块中包含return语句 finally需谨慎使用
function test () {
  try {
    return 2
  } catch () {
    return 1
  } finally {
    return 0
  }
}
console.log(test()) // 0
``

#### 其他
* 可视区的宽/高
1.`document.documentElement.clientWidth`  可视区域的宽
2.`document.documentElement.clientHeight` 可视区域的高
* 元素的宽/高
1.`offsetWidth/offsetHeight`: 获取元素的宽度或高度=`width/height+padding+border`
2.`clientWidth/clientHeight`: 获取元素的宽度或高度=`width/height+padding`

```js
/*css
#one{
  height:100px;
  width:100px;
  background:red;
  margin:20px 30px;
  padding:20px 30px;
  border:10px solid black;
}*/
console.log(one.offsetWidth);    //180=100+30+30+10+10
console.log(one.clientWidth);    //160=100+30+30
  • scrollTop 滚动高度 被隐藏在内容区域上方的像素值
    兼容写法 var scrollTop = document.body.scroolTop || document.documentElement.scrollTop
  • offsetParent 最近有定位属性的祖先节点 如果祖先没有定位则你认为body
  • offsetLeft/offsetTop 外边框到有定位父级的内边框的距离
  • obj.getBoundingClientRect() 获取元素的信息(返回对象)
    包括 height width bottom top right left 获取的值会随滚动条变化
  • window.onerro 捕获即时运行错误 任何没有通过try-catch处理的错误都会触发
  • performance.getEntries() 获取所有加载成功的资源列表
  • document.images 获取页面中所有的images
-------------本文结束感谢您的阅读-------------
0%