2020.11.9 《JavaScript高阶教程》第八章BOM第十章DOM

最新推荐文章于 2024-08-13 13:35:52 发布

tatakae

最新推荐文章于 2024-08-13 13:35:52 发布

阅读量165

点赞数

分类专栏： JavaScript高级文章标签： javascript

本文链接：https://blog.csdn.net/qq_48942961/article/details/109576409

版权

JavaScript高级专栏收录该内容

25 篇文章 0 订阅

订阅专栏

《JavaScript高阶教程》

第八章 BOM

BOM定义：浏览器对象模型

window对象

1.window既是接口又是浏览器的global对象
2.全局作用域中的变量函数都是window对象的属性和方法
window可以随便调用
全局变量不能被delete删除只能赋值null，但window对象上的定义的属性可以被delete删除：delete（window.color）

窗口关系及框架

？？

窗口位置

？？

窗口大小

？？？

导航和打开窗口（弹窗）

window.open(“要打开的网址”, “新建网址还是就在原网址” ," 特性设置");
其中特性设置通过逗号分隔开
第二个参数：_self,_parent,_top,_blank
第三个参数设置新窗口的特性：“height=500,width=500,top=10,left=10”

close()可以用于自动关闭新窗口
如

var wroxWin = window.open("www.baidu.com","wroxWin","height=19,width=10");
window.close();

间歇调用和超时调用：注意函数都只能放在里面不能用匿名函数

超时调用（常用）

JavaScript是单线程语言，但而可以通过设置超时值和间歇时间值来调度代码
超时调用为在指定的时间后执行代码：

setTimeout(函数或字符串，时间单位为毫秒);
setTimeout("alert("hello world")";1000);
setTimeout(function(){
},1000);

间歇调用

每隔指定时间执行一次代码
setInterval(函数，时间);
setInterval(function(){
},1000);

setInterval()也会返回一个ID
clearInterval(ID);

系统对话框

Alert()
confirm():有确认和取消按钮
prompt()

、、、、、
、、、、、
、、、、、
、、、、、
、、、、、
、、、、、
、、、、、
、、、、、
、、、、、
、、、、、
、、、、、
、、、、、
、、、、、
、、、、、
、、、、、

第十章 DOM

（文档对象模型）是针对HTML和Xml的一个API（应用程序编程接口获取文档对象让其可以编程）
任何元素都可能是节点

Node类型

1.nodeType可以返回节点类型
element.nodeType
2.如果对象是元素则可以用nodeName和nodeValue
nodeName保存的是节点的标签名
nodeValue节点标签的值，不一定有

节点关系

**子节点：**每个节点又有一个childNodes属性相当于一个数列，其中包含了一个Nodelist对象,返回的是所有类型的节点
children[]返回的是元素节点

element.childNodes[]  或者element.childNodes.item(1);//可以用来访问子节点，最后一个节点的子节点为Null

父节点
element.parentNode
兄弟节点
element.previousSibling;兄节点
element.nextSibling；弟节点

操作节点

创造节点

    //创建元素节点
     createElement()
    //

添加节点

高级方法：
var li = <li> 实验</li>;
 element.insertAjacentHTML('beforeend',li);(可以直接添加语句不需要创建节点)
  append（只能在末尾加）和  insertbefore（要添加的节点，参考节点）可以在任何位置添加
    //添加前需要创造节点
    var divs = document.createElement('div');
    // box.appendChild(divs);
    box.insertBefore(divs, null); //第二个参数为Null则跟appendchild执行相同效果，

替代节点

            //替代节点
            var p = document.createElement('p');
            box.replaceChild(p, box.firstChild);

删除节点

  //删除该节点
            box.removeChild(box.firstChild); //删除了替换了的P节点

复制节点

     //复制节点,括号内为true为深复制表示复制了该节点的所有内容包括子级，不写或false为浅复制只复制该节点本身
            //复制后的节点都需要被添加才能作用
            var box2 = box.cloneNode(true);
            box.insertBefore(box2, null);
            var box3 = box2.cloneNode(false);
            box2.insertBefore(box3, null);

///
//
//
//

document类型

直接写入

 //getElementByName获得单选按钮
            var sex = document.getElementsByName('sex');
            console.log(sex);
            // 直接写入内容,在文档中输入时间，或插入其他javascript文件
            document.write("<strong>" + (new Date()).toString() + "</strong>");

element类型节点属性操作

修改节点属性：element.属性 = “”；要加引号
getAttribute常用于得到自定义属性

//获得特性
            alert(box.getAttribute("class"));
            // getAttribute常用于获得自定义属性,普通属性可以直接获得并修改
            //设置属性值setAttribute("属性名", "属性值")
            box.setAttribute("id", "box");
            element.removeAttribute("属性名");//测地删除属性

Attribute的应用


            //Atrtributes获得属性 修改属性
            var id = sex[1].attributes.getNamedItem("ID").nodeValue; //nodevalue就是属性值
            //removeNamedItem();删除属性
            //setNamedItem();添加节点
            //item(pos);返回位于数字pos处的节点
            var pos = box.attributes; //attributes也是一个数组存储了box的属性，可以用attibutes[i]来表示第几个属性

            //attribute.nodeValue为属性值
            //attribute.nodeName为属性名
            console.log(pos);
                 
            //#### attributes可以用于遍历属性

text类型

创建文本节点


//  text类型
        //      可以通过nodeValue属性和data()属性访问文本内容
        var ps = document.querySelector('p');
        ps.firstChild.nodeValue = "我叫邓柱" //nodevalue是对子级的    引号内注意要将符号转义
        ps.innerHTML = "我不叫邓柱"; //与innerHTML相同,innerHTML是对父级来用的

        console.log(ps);
        //文本节点的创建
        var textNode = document.createTextNode('<strong>\hello< \/\strong>\world'); //不可以转义
        ps.innerHTML = '\<strong\>helloworld'
        ps.appendChild(textNode); //等于innerHTML
        console.log(ps.childNodes[1]); //这一句话其实是两个文字节点

合并分割文本节点

//合并文本节点
        element.normalize(); //添加了这句话就会将element中的文本节点全部合并为一个
        //分割文本节点
        element.splitText(n); //文本会在第n个开始分割文本节点

DOM操作技术

动态脚本  可以在javascript脚本内 通过document.createElement("script");   script.text = ""来添加脚本或者
        document.createElement("script");   script.src = "";链接外部脚本


        //动态样式   是页面加载完成后动态添加到页面中的
        // 注意要将代码添加到body元素中去、
         var link = document.createElement('link');
        link.rel = "StyleSheet";
        link.href = ""
         var head = document.getElementsByTagName("head")[0]; //tagname 相当于一个数列
         head.appendChild(link);

表格操作

//表格操作
        //不需要先创建再添加   直接添加
        var table = document.querySelector('table');
        //创建 头 身 脚
        var thead = table.createTHead();
        var tbody = table.createTBody();
        var tfoot = table.createTFoot();
        //创建行
        thead.insertRow(0); //添加用括号
        //创建列
        thead.rows[0].insertCell(0); //用rows数列来表示行数,cells数列表示单元格数
        //delete删除某行或者某列
        thead.rows[0].deleteCell(0); //deleteRow()删除某行