DOM操作和BOM操作

来源：互联网发布：自学武术软件编辑：程序博客网时间：2024/06/05 22:34

DOM操作（文档对象模型）

知识点：

1、DOM本质什么？

浏览器把拿到的HTML代码，结构化一个浏览器能识别并且js可操作的一个模型而已

2、DOM节点操作

DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

（1）创建新节点

  createDocumentFragment()    //创建一个DOM片段  createElement()   //创建一个具体的元素  createTextNode()   //创建一个文本节点

（2）添加、移除、替换、插入

  appendChild()  removeChild()  replaceChild()  insertBefore() //在已有的子节点前插入一个新的子节点

（3）查找

  getElementsByTagName()    //通过标签名称  getElementsByName()    //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)  getElementById()    //通过元素Id，唯一性

//获取DOM节点：    var div=document.getElementById('div1')//元素    var divList=document.getElementsByTagName('div')//元素集合    var containerList=document.getElementsByClassName('.container')//集合

3、DOM结构操作

        //新增节点：        var div1=document.getElementById('div1');        var p5=document.createElement('p')        p5.innerHTML='我是新增元素p5';        div1.appendChild(p5)        //移动元素:        var p2=document.getElementById('p2')        div1.appendChild(p2)        //获取父、子节点:        var parent=div1.parentElement        var child=div1.childNodes        //删除节点:        div1.removeChild(child[0])

题目：

1、DOM是哪种基本的数据结构？

答案：树

2、DOM操作的常用API有哪些？

获取DOM节点，以及节点的property和Attribute
新增、移动、删除节点

3、DOM节点attribute和Property 有何区别？

property只是一个js对象的属性的修改
attribute是对HTML标签属性的修改

代码演练：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            div{                padding: 2%;                background-color: gainsboro;                margin: 1% 0;            }        </style>    </head>    <body>        <div id="div1" class="class-div1">            <p id="p1" data-name="pa-data-name">this is a p1</p>            <p id="p2">this is a p2</p>        </div>        <div id="div2">            <p id="p3">this is a p3</p>            <p id="p4">this is a p4</p>        </div>        <script type="text/javascript">            //property            var div1=document.getElementById('div1');            console.log(div1.className);                        div1.className='aaa'            console.log(div1.className)            //attribute            var p1=document.getElementById('p1')            console.log(p1.getAttribute('data-name'))            p1.setAttribute('data-name','fan')            var div1=document.getElementById('div1');            //新增节点            var p5=document.createElement('p')            p5.innerHTML='我是新增元素p5';            div1.appendChild(p5)            //移动已有的元素p2到最后            var p2=document.getElementById('p2')            div1.appendChild(p2)            //获取父节点、子节点                     var parent=div1.parentElement            console.log(parent)            var child=div1.childNodes            console.log(child)            //删除节点:            div1.removeChild(child[0])        </script>    </body></html>

效果：
这里写图片描述

BOM操作（浏览器对象模型）

知识点：

navigator
navigator.userAgent
screen
screen.width
screen.height
location
console.log(location.href)
console.log(location.protocol)
console.log(location.host)
console.log(location.pathname)
console.log(location.search)
console.log(location.hash)
history
history.back 后退
history.forward 前进

题目：

1、如何检测浏览器的类型

var ua=navigator.userAgent  //获取浏览器信息，区分出来浏览器类型var isChrome=ua.indexOf('Chrome')console.log(isChrome)

2、拆解URL的各部分

例子：
https://cn.vuejs.org/v2/guide/?21#Vue-js-是什么

console.log(location.href) //输出URL地址"https://cn.vuejs.org/v2/guide/#Vue-js-是什么"console.log(location.protocol) //输出协议https:console.log(location.host) //输出域"cn.vuejs.org"console.log(location.pathname) //输出路径"/v2/guide/"console.log(location.search) //"?21"console.log(location.hash) //#后面的东西"#Vue-js-是什么"

阅读全文

0 0