前端 BOM和DOM操作

2022-02-14 21:35:10 阅读：127 来源： 互联网

内容概要

BOM和DOM操作
DOM操作之查找标签
DOM操作之操作标签

内容详细

BOM和DOM操作

        BOM		浏览器对象模型>>>:使用js操作浏览器
        DOM		文档对象模型>>>:使用js操作前端页面

BOM操作

        window.open() 				- 打开新窗口
        window.close() 				- 关闭当前窗口
        history.forward()  			// 前进一页
        history.back()  			// 后退一页
        location.href  				获取URL
        location.href="URL" 		// 跳转到指定页面
        location.reload() 			重新加载页面


        setTimeout()
        clearTimeout()
        setInterval()
        clearInterval()

DOM操作之查找标签

        前缀关键字>>>:document

        # 基本查找(核心)
        document.getElementById           根据ID获取一个标签
        document.getElementsByClassName   根据class属性获取
        document.getElementsByTagName     根据标签名获取标签合集

        """
        如果我们的js代码需要页面上某个标签加载完毕
        那么该js代码应该写在body内部最下方或者引入外部js文件
        """

        # 间接查找(重要)
        parentElement            父节点标签元素
        children                 所有子标签
        firstElementChild        第一个子标签元素
        lastElementChild         最后一个子标签元素
        nextElementSibling       下一个兄弟标签元素
        previousElementSibling   上一个兄弟标签元素

节点操作

        var aEle = document.createElement('a');  # 创建标签
        aEle.setAttribute('href','https://www.mmzztt.com/')  # 设置属性
        aEle.innerText = '好不好看?'  # 设置内容文本
        document.getElementsByTagName('p')[0].appendChild(aEle)  # 动态添加
        """一定要明确当前手上是什么对象"""
        imgEle.getAttribute('title')  # 获取标签属性


        innerText
            不加赋值符号是获取内部文本
            加了赋值符号是设置内置文本
            # 不可以识别HTML标签
        innerHTML
            不加赋值符号是获取内部标签+文本
            加了赋值符号是设置内置标签+文本
            # 可以识别HTML标签

获取值操作

        # 普通的文本数据获取
            标签对象.value
        # 特殊的文件数据获取
            标签对象.value  '''仅仅获取一个文件地址而已'''
            标签对象.files[0]  '''获取单个文件数据'''
            标签对象.files  '''获取所有文件数据'''

class操作

        classList  查看所有的类
        classList.remove(cls)  删除指定类
        classList.add(cls)  添加类
        classList.contains(cls)  存在返回true，否则返回false
        classList.toggle(cls)  存在就删除，否则添加

样式操作

        标签对象.style.属性名 = 属性值

事件

        # 就是给HTML元素添加自定义的功能
        绑定事件的方式1
            <button onclick="func()">点我</button>
            <script>
                function func() {
                    alert(123)
                }
            </script>

        绑定事件的方式2
            <button id="d1">选我</button>
            <script>
                // 1.先查找标签
                var btnEle = document.getElementById('d1')
                // 2.绑定事件
                btnEle.onclick = function () {
                    alert(456)
                }
            </script>

            # 如果某个标签已经有事件了 那么绑定会冲突

内置参数this

        # this指代的就是当前被操作对象本身
        在事件的函数体代码内部使用
            btnEle.onclick = function () {
                    alert(456)
                    console.log(this)
                }

标签：DOM,标签,前端,获取,BOM,操作,document
来源： https://www.cnblogs.com/ydy001/p/15894175.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9