DOM-文档对象模型

最新推荐文章于 2024-10-02 05:39:15 发布

是wz呀

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量81

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_63170206/article/details/125378817

版权

1.DOM

1.1DOM概述

1.dom是处理可扩展标记语言的标准编程接口，可以改变网页的样式，内容和结构。DOM就是一系列功能集合
2.文档：一个页面就是一个文档（document）
3.元素：页面中的所有标签都是元素（element）
4.节点：网页中的所有内容都是节点（标签，属性，文本，注释等）（node）
4.对象：文档，元素，节点都是对象

1.2获取元素

获取元素
<script>
  // 1.id获取---id是大小写敏感的字符串
  // console.dir--打印返回的元素对象
  document.getElementById();
  // --------------------------

  //2. 标签名获取--返回的是元素对象的集合（伪数组）--操作里面的对象采用遍历的方式
  document.getElementsByTagName();
  // ------------------------------------------

  // 父元素必须指明是哪一个对象，获取时不包含父元素本身
  element.getElementsByTagName();
  // ---------------------------------------------------

  // 3.获取特殊元素
  // 3.1获取body元素
  document.body;
  // 3.2获取html元素
  document.documentElement;
</script>

1.3事件基础

在这里插入图片描述

（触发响应机制）
组成：
1.事件源：事件被触发的对象谁
2.事件类型：如何触发什么事件
3. 事件处理程序：通过函数赋值的方式完成

<script>
    // btn是事件源 onlick是事件类型 function是事件处理程序
    btn.onlick=function(){
        alert('事件')
    }
</script>

1.4 执行步骤

1.获取事件源
2. 绑定事件注册事件
3.添加事件处理程序

<body>
    <div>123</div>
    <script>
    // 1.获取事件源
    var div=document.querySelector('div');
    //2. 绑定事件 注册事件
        // 3.添加事件处理程序
        div.onlick=function(){
            console.log('执行事件的步骤')
        }
</script>

1.5操作元素

在这里插入图片描述

1.5.1修改元素内容

1.element.innerText（从起始位置到终止位置的内容，但它去除HTML标签，同时换行和空格也会去掉）
2.element.innerHTML（起始位置到终止位置的全部内容，包含html标签，同时保留空格和换行）–较常用
区别：前者不识别html标签，后者识别html标签

<button>显示当前系统时间</button>
    <div>某个时间</div>
    <script>
        // 获取元素
        var btn=document.querySelector('button')
        var div=document.querySelector('div')
        // 注册事件,添加处理程序
        btn.onlick=function(){
            div.innerText='1999'
        }

1.5.2修改元素属性

1.对象.src=‘目标地址’
2.对象.href='目标链接’
3.对象.alt='目标替换文本‘
4.对象.title='目标图片提示信息’

    <button id="l">1</button>
    <button id="z">2</button>
    <img src="" alt="">
    <script>
        // 修改元素属性
        var w=document.getElementById('l');
        var z=document.getElementById('z');
        var img=document.querySelector('img');
        z.onlick=function(){
            img.src=''
        }

1.5.3表单元素操作

1.dom可以操作：type,value,checked,selected,disabled
表单里面的值 文字内容是通过value来修改的；如果想要某个表单被禁用，不能再点击 disabled
2.对象.属性='值’
3.对象.type=‘更换表单类型’
4.对象.value=‘更换表单内容’
5.对象.disabled=‘true’//可设置表单是否不可用，false为不可用

 <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
// 获取元素
var btn=document.querySelector('button')
var input=document.querySelector('input')
// 注册事件 处理程序
btn.onlick=function(){
    input.value='被点击了'
    
}
    </script>

1.5.6样式操作属性

注：
1.可以通过js修改元素的大小，颜色，位置等样式
2.行内样式操作：element.style–适用于样式较少，功能简单的情况
3.类名样式操作：element.className–通过修改元素的className类名进行更改，会直接覆盖原来的类名
4.如果要保留原先的类名，可以写两个类名
注：样式要采用驼峰命名法，如fontSize,backgroundColor
5.js修改style样式操作，产生的是行内样式，css权重比较高
6.this.style.样式（驼峰命名）='样式值’
7.this.className='值’

  .change {
            background-color: #fff;
            font-size: large;
        }
    </style>
</head>
<body>
    <div></div>
    
    <script>
        var div=document.querySelector('div')
        div.οnclick=function(){
            // 行内样式操作
            div.style.backgroundColor='red';
            div.style.fontSize='25px';
            // 类名样式操作-
            this.className='change'
        }

1.5.7自定义操作属性

1.获取属性值
element.属性–获取内置即元素本身自带的属性
element.getAttribute(‘属性’)–获得自定义的属性
2.设置属性值
element.属性=‘值’
element.setAttribute(‘属性’,‘值’)–主要针对自定义属性值
3.移除属性
element.removeAttribute(’属性)
4.H5自定义属性
4.1.自定义属性以data-开头作为属性名并且赋值
4.2.element.getAttribute()
element.dataset.index–只能获取data开头的自定义属性

1.6节点操作

作用：获取元素
节点有nodeType(节点类型),nodeName(节点名称)，nodeValue（节点值）这三个基本属性
元素节点nodeType为1，属性节点的节点类型为2，文本节点的节点类型为3（包含文字，空格和换行）

1.6.1节点层级

父子兄层级关系
1.父级节点
node.parentNode–得到离元素最近的父级节点，如果找不到父节点返回null
2.子节点
parentNode.childNodes–获得所有的子节点包含元素节点，文本节点等
如果只想获得里面的元素节点，需要专门处理
parentNode.children–只获得子节点中的元素节点
parentNode.firstChild–返回第一个子节点，找不到则返回null
parentNode.lastChild–返回最后一个子节点，找不到返回null
parentNode.firstElementChild–返回第一个子元素节点
parentNode.lastElementChild–返回最后一个子元素节点
3.兄弟节点
node.nextSibling–下一个兄弟节点
node.previousSibling–上一个兄弟节点
node.nextElementsSibling–下一个兄弟元素节点
node.previousElementSibling–上一个兄弟元素节点

4.动态创建节点
document.creatElement(‘’)
5.添加节点
node.appendChild()
node.insertBefore()

  <script>
        // 创建节点
      var li=document.createElement('li')
        // 添加节点
        ul.appendChild('li')
        var lili=document.createElement('li')
        ul.insertBefore(lili,ul.children[0])
    </script>