DOM操作和BOM操作

最新推荐文章于 2024-04-03 06:08:24 发布

转载最新推荐文章于 2024-04-03 06:08:24 发布 · 1.4k 阅读

文章标签：

#dom #浏览器 #对象

前端学习笔记专栏收录该内容

33 篇文章

订阅专栏

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-是什么"