9-BOM-DOM（上）

最新推荐文章于 2024-07-29 11:53:27 发布

-是桔子不是橘子-

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量710

点赞数 10

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_42820765/article/details/140763136

版权

1：BOM概念
BOM：Browser Object Model。
window对象是BOM中所有对象的核心。

console.log(window);  //window

2：window属性

self：self代表自己，相当于window。

console.log(window.self);   //window
console.log(window.self === window);  //true

parent：返回父窗口。
top：返回顶层窗口，和parent作用一样。
注：页面可以通过iframe标签相互嵌套就可以通过parent top 等相互访问
opener：窗口开启者

3：window方法

window.open(url, name, feature, replace);  //（window可省略）

url：一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。

name：一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。

这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。

feature： 自行扩展。 replace： 自行扩展。

谷歌默认会把系统自动打开的新网页阻止掉，但不阻止通过事件打开新的网页。

open('http://www.baidu.com');  //默认每次都在一个新的窗口打开页面
open('http://www.baidu.com','baidu');  //给新打开的窗口命名
//<button id="btn">打开</button>
document.getElementById('btn').onclick = function () {
       window.open('http://www.baidu.com', 'aaaa');
}

close：关闭浏览器。

setTimeout(function () {
    window.close();
},3000)

但都支持通过别的网页打开的新的网页关闭。

alert(显示的文本)：弹出窗。

window.alert('早上好');
alert('早上好');

confirm(对话框提示的文字)：该方法有返回值，点击确定返回true，点击取消返回false。

console.log(window.confirm('明天大家回家吗？'));
if(confirm('你确定退出吗？')){
    alert('退出');
}else{
    alert('不退出');
}

prompt(提示信息)：输入框。点击确定返回字符串，点击取消返回null
即，弹出让用户输入数据的对话框，返回用户输入的值

console.log(window.prompt('1+1等于几？'));
var num = prompt('请输入一个整数');
alert(num);   //输入并确认 弹出输入的值。 点击取消，弹出null
var num = prompt ('请输入一个整数',5);
alert(num);   //5是可选的默认值，默认输入框里是5

history对象

该对象包含浏览器窗口访问过的url。

（1）.属性
length 返回浏览器历史记录的数量

console.log(history);    //默认length就是1

（2）.方法
back() 后退，加载前一个url。
forward() 前进。

document.getElementById('forward').onclick = function () {
    history.forward();
}

go(number) 如果参数是正数，那么就是前进相应的数目，如果是负数那么反之，如果是0那么就是刷新。

location对象
包含有当前url的相关信息，而history对象不能具体反应url的相关信息。
属性：
href：设置或返回完整的url。可以为相对路径，也可以为绝对路径。
search：返回url?后面的查询部分。
hash ：是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。
方法：
assign(url)：加载新的文档。
reload(boolean)：重新加载文档，当参数是true，任何时候都会重新加载，false的时候，只有在文档改变的时候才会加载，否则直接读取内存当中的。
replace(url)：用新的文档代替当前的文档。但不会在 History 对象中生成一个新的记录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录。

setTimeout(function () {
    location.assign('https://www.baidu.com');
    location.reload(true);
    location.replace('https://www.baidu.com');
}, 3000);

navigator对象
userAgent：用户代理信息，通过该属性可获取浏览器及操作系统信息

console.log(navigator.userAgent);

window事件
onload：加载事件网页加载完毕后执行。

window.onload = function () {
    console.log(0);
}
console.log(1);       //先打印1 在打印0

onscroll：滚动事件。

window.onscroll = function () {
    console.log(1111);
}

onresize：窗口缩放事件。

window.onresize = function () {
    console.log(222);
}

// 获取浏览器视窗宽度/高度
// document.documentElement.clientWidth;
// document.documentElement.clientHeihgt;
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
// 获取浏览器滚动条隐藏的宽度/高度
// chrome(body)、火狐、IE(documentElement)
// document.documentElement.scrollLeft || document.body.scrollLeft;
// document.documentElement.scrollTop || document.body.scrollTop;
// 兼容写法：
window.onscroll = function () {
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
    console.log(scrollTop);
    console.log(scrollLeft);
}

应用：
1：广告弹出窗（自动关闭）。

<div id="ad"><span id="times">5</span>秒钟以后自动关闭</div>

* { margin: 0; padding: 0; }
#ad {
    line-height: 80px;
    background: red;
    font-size: 30px;
    color: #fff;
    text-align: center;
}

var times = document.getElementById('times');
       var ad    = document.getElementById('ad');
       var start = 5;
       var timer = setInterval(function () {
       start--;
       times.innerHTML = start;
       // 判断是否到达终点
       if(start === 0) {
              clearInterval(timer);
              ad.style.display = 'none';
       }
}, 1000);

8：DOM的概念和作用
DOM：Document Object Model。
document对象是DOM核心对象。
作用：对html中的内容，属性，样式进行操aizaiaidouquzorensanl l zen作nanajiuzheyangb。
节点树中节点之间的关系：父子，兄弟。

9：DOM常用属性

title：返回或设置当前文档的标题。

console.log(document.title);      //会显示本页面title标签的内容

标题走动效果：

<title>拼搏到无能为力，坚持到感动自己</title>

setInterval(function () {
       var arr = document.title.split('');
       arr.push(arr.shift());
       document.title = arr.join('');
}, 500);

all：返回所有元素的集合。

console.log(document.all);

forms：返回对文档中所有form对象的引用。

通过集合来访问相应的对象：

1.通过下标的形式。

2.通过name形式。

<body>
    <form action="javascript:;" name="form1"></form>
    <form action="javascript:;" name="form2"></form>
    <form action="javascript:;" name="form3"></form>
</body>

console.log(document.forms);
console.log(document.forms['form2']);
console.log(document.forms[1]);

10：DOM查询方法

1.getElementById(id)：返回拥有指定id的（第一个）对象的引用。

2.getElementsByTagName(tagName)：返回有指定标签名的对象集合。

返回的是所有此元素的一个集合

注：上面两个方法没有兼容性问题。

3.getElementsByName(name)：返回带有指定name指定名称的对象的集合。 有兼容性问题。

在IE9及其以下， 如果该对象的标准属性包含有name,（比如说input，在input中name是input的默认属性，所以可以正常使用，但是在div中name并不是div的默认属性，所以不能正常显示），那么可以正确的使用。否则不可以使用。 在火狐中，该方法可以适用于任何情况。

结论： getElementsByName(name)主要是适用于表单。

4.write：输出内容到页面。

5.getElementsByClassName()：返回带有指定className指定名称的对象的集合。有兼容性问题，适用于火狐浏览器，在IE浏览器中不可用（IE8及以下不可用）。

练习：因为ie没有此方法，所以封装获取className值的DOM节点的兼容性的函数。（****考）

function byClassName(className) {
    if(document.getElementsByClassName) {
        return document.getElementsByClassName(className); 
    } else {
        // 获取页面上所有的元素
        var allTags = document.getElementsByTagName('*');
        var result = [];
        for(var i = 0; i < allTags.length; i++) {
            if(allTags[i].className === className) { //第一个className是属性，第二个是变量
                result.push(allTags[i]);
            }
        }
        return result;
    }
}
console.log( byClassName('dog') );

11：操作内容

读

innerHTML：用来设置或获取对象起始和结束标签内（例如div框架，它只会获取div里面的内容，而不会获取div）的内容(识别html标签) 。

<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

var box = document.getElementById('box');
console.log(box.innerHTML);   //<b>上课不许睡觉！</b>

2.innerText：用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于IE，最新版火狐已支持)。

textContent用来设置或获取对象起始和结束标签内的内容 (只是获取文字内容)(适用于火狐，IE8及其以下不支持)。

Eg:

<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

var box = document.getElementById('box');
console.log(box.innerText);   //上课不许睡觉！

outerHTML 用来设置或获取包括本对象在内的起始和结束标签内（例如div框架，不仅会获取div里面的内容，也会获取div自身的内容）的内容(识别html标签) 。

<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

var box = document.getElementById('box');
console.log(box.outerHTML);  //<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

outerText 用来设置或获取包括本对象在内的起始和结束标签内的内容(只是获取文字内容)（火狐不支持）。

<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

var box = document.getElementById('box');
console.log(box.outerText);   //上课不许睡觉！

写

<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

var box = document.getElementById('box');
box.innerHTML = '<i>也不许打哈欠！</i>';   //也不许打哈欠！

<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

var box = document.getElementById('box');
box.innerText = '<i>也不许打哈欠！</i>';   //<i>也不许打哈欠！</i>

<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

var box = document.getElementById('box');
box.outerHTML = '<i>也不许打哈欠！</i>';    //结构里的box标签被换成了<i>也不许打哈欠！</i>

12：操作属性

1.直接操作

对象.属性。 // 获取属性。某些属性有兼容性问题，例如name（如果不是标签特有的属性，在chrome/firfox访问不到，在IE8及其以下浏览器能获取的到）。

<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

var box = document.getElementById('box');
console.log(box.className);   // aaa

<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

var box = document.getElementById('box');
console.log(box.age);   // undefined   (通过 . 的形式不能操作页面自定义的属性）

对象.属性=值 // 设置、添加属性(属性值)。

<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

var box = document.getElementById('box');
box.className = 'bbb';   // bbb

<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

var box = document.getElementById('box');
box.age = '22';    //不变  (通过 . 的形式不能操作页面自定义的属性）

2.通过方法

getAttribute(“属性”)。 // 获取给定的属性的值。

<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

var box = document.getElementById('box');
console.log(box.getAttribute('class'));  //aaa

<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

var box = document.getElementById('box');
console.log(box.getAttribute('age'));  //28

setAttribute(“属性”,“值”)。 // 设置或是添加属性。

<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

var box = document.getElementById('box');
box.setAttribute('class', 'ccc');

<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

var box = document.getElementById('box');
box.setAttribute('age', '21');

removeAttribute(“属性”)。 // 删除属性。

<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

var box = document.getElementById('box');
box.removeAttribute('class');

13：操作样式

1.行内样式

对象.style.属性 // 获取样式属性

对象.style.属性=值 // 设置、添加样式属性。

注：遇到属性是“-”链接的，要将“-”去掉，后面的单词的首字母大写。

<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

var box = document.getElementById('box');
box.style.width = '200px';
box.style.backgroundColor = 'pink';

注：此方式只适用于行内样式

2.行内样式和css层叠样式通用的方式

对象.currentStyle.属性 IE 用来获得实际的样式属性

<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

var box = document.getElementById('box');
console.log(box.currentStyle['height']);

getComputedStyle((对象,null).属性) 火狐用来获得实际的样式属性。（有浏览器兼容问题）

<div id="box" class="aaa" age="28"><b>上课不许睡觉！</b></div>

var box = document.getElementById('box');
console.log( getComputedStyle(box, null)['height'] );    //null只是一个占位符

兼容写法：（重要，必须掌握）

function getStyle(obj, attr) {
    if(obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}
console.log(getStyle(box, 'height'));

注：只能获取不能设置。

14：DOM增删改

一：创建节点（注释和文档节点一般不需要创建）

1：创建元素节点

document.createElement("元素标签名");

var newI = document.createElement('i');
newI.innerText = '这是斜体';
box.appendChild(newI);

2：创建属性节点(了解）

var oAttr = document.createAttribute(“属性名”);（不常用）
oAttr.value = "attr-name";
oDiv.setAttributeNode(oAttr);

对象.属性=属性值;（常用）

3：创建文本节点(了解）

对象.innerHTML = "";

var oText = document.createTextNode(“文本”);  // 文本中的HTML标签实体化
oDiv.appendChild(oText);

二：追加到页面当中

父对象.appendChild(newNode) // 插入到父对象最后。

var newI = document.createElement('i');
newI.innerText = '这是斜体';
box.appendChild(newI)；

父对象.insertBefore(newNode, existsNode) // 插入到什么对象之前。

var newI = document.createElement('i');
newI.innerText = '这是斜体';
document.body.insertBefore(newI, box);    //body 是box 的父级

三：修改(替换)节点

父对象.replaceChild(newNode,existsNode); // 前面的替换后面的

var newI = document.createElement('i');
newI.innerText = '这是斜体';
document.body.replaceChild(newI, box);   //body 是box 的父级

四：删除节点

父对象.removeChild(oldNode);

如果确定要删除节点，最好也清空内存对象=null;

document.body.removeChild(box);

五：表格操作

table.tBodies[0].rows[0].cells[0].innerHTML;
var oNewRow = table.insertRow(“行位置”);
oNewRow.insertCell(“列位置”);

<table border="1" id="list">
         <tr>
                <td>ID</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
         </tr>
         <tr>
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>28</td>
         </tr>
         <tr>
                <td>2</td>
                <td>翠花</td>
                <td>女</td>
                <td>22</td>
         </tr>
         <tr>
                <td>3</td>
                <td>旺财</td>
                <td>-</td>
                <td>3</td>
         </tr>
  </table>

 // 操作表格
var list = document.getElementById('list');
var tbody = list.tBodies[0];
console.log(tbody.rows[1].cells[1].innerHTML);
tbody.rows[1].cells[1].innerHTML = '李四';
// 删除tr
tbody.removeChild(tbody.rows[1]);
// 添加tr
var newTr = tbody.insertRow(2);
var newTd = newTr.insertCell(0);
newTd.innerText = 5;
var newTd = newTr.insertCell(1);
newTd.innerText = 6;
var newTd = newTr.insertCell(2);
newTd.innerText = 7;
var newTd = newTr.insertCell(3);
newTd.innerText = 8;

应用：

1：顶部悬浮。(吸顶效果）

<body style="height: 10000px;">
       <div id="nav"></div>
</div>

*{margin:0;padding:0; }
#nav{
       width: 100%;
       height: 40px;
       background:#eee;
       position: fixed;
       top: 0;
       left: 0;
       box-shadow:  0 0 8px #ccc;
       opacity: 0;
}
#nav.show{
       opacity: 1;
}

window.onload = function () {
    var nav = document.getElementById('nav');
    window.onscroll = function () {
        var top = document.documentElement.scrollTop || document.body.scrollTop;
        if(top >= 400) {
            nav.classList.add('show');
        } else {
            nav.classList.remove('show');
        }
    };
};

2：回到顶部。

3：动态创建表格。

综合应用：

1：表格删除操作。

-是桔子不是橘子-

关注

10
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
9-BOM-DOM（上）

如果该对象的标准属性包含有name,（比如说input，在input中name是input的默认属性，所以可以正常使用，但是在div中name并不是div的默认属性，所以不能正常显示），那么可以正确的使用。某些属性有兼容性问题，例如name（如果不是标签特有的属性，在chrome/firfox访问不到，在IE8及其以下浏览器能获取的到）。outerHTML 用来设置或获取包括本对象在内的起始和结束标签内（例如div框架，不仅会获取div里面的内容，也会获取div自身的内容）的内容(识别html标签)。
复制链接

扫一扫