DOM操作和BOM操作

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操作(浏览器对象模型)

知识点:

  1. navigator
    navigator.userAgent
  2. screen
    screen.width
    screen.height
  3. 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)
  4. 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-是什么"
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值