js的dom

德莱文.

已于 2022-04-10 21:15:26 修改

阅读量260

点赞数

分类专栏：前端文章标签： javascript

于 2022-04-09 22:55:01 首次发布

本文链接：https://blog.csdn.net/qq_51903134/article/details/124069562

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.获取元素

1.1 获取页面的元素

使用 getElementByld() 方法可以获取带ID的元素对象

doucument.getElementByld('id名')

1.2 根据标签名获取

使用 getElementByTagName() 方法可以返回带有指定标签名的对象的集合

doucument.getElementsByTagName('标签名');

1.3 通过H5新增方法获取

①getElementsByClassName
根据类名返回元素对象合集

document.getElementsByClassName('类名')

②document.querySelector
根据指定选择器返回第一个元素对象

document.querySelector('选择器');

选择器需要加符号
类选择器.box
id选择器 #nav

③document.querySelectorAll
根据指定选择器返回所有元素对象

document.querySelectorAll('选择器');

2. 事件

2.1 鼠标事件

鼠标事件   触发条件
onclick   鼠标点击左键触发
onmouseover   鼠标经过触发
onmouseout   鼠标离开触发
onfocus   获得鼠标焦点触发
onblur   失去鼠标焦点触发
onmousemove   鼠标移动触发
onmouseup   鼠标弹起触发
onmousedown   鼠标按下触发

3.操作元素

3.1、改变元素属性

// img.属性
img.src = "xxx";
input.value = "xxx";
input.type = "xxx";
input.checked = "xxx";
input.selected = true / false;
input.disabled = true / false;

3.2、改变样式属性

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

行内样式操作

// element.style
div.style.backgroundColor = 'pink';
div.style.width = '250px';

类名样式操作

// element.className

注意：

1.JS里面的样式采取驼峰命名法，比如 fontSize ，backgroundColor
2.JS 修改 style 样式操作，产生的是行内样式，CSS权重比较高3.
3.如果样式修改较多，可以采取操作类名方式更改元素样式
4.class 因为是个保留字，因此使用className来操作元素类名属性
5.className 会直接更改元素的类名，会覆盖原先的类名

<body>
    <div class="first">文本</div>
    <script>
        // 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';
            // 让我们当前元素的类名改为了 change

            // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
            // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
            // this.className = 'change';
            this.className = 'first change';
        }
    </script>
</body>

3.3自定义属性

3.3.1获取属性值

获取内置属性值(元素本身自带的属性)

element.属性;

获取自定义的属性

element.getAttribute('属性');

3.3.2、设置属性值

设置内置属性值

element.属性 = '值';

主要设置自定义的属性

element.setAttribute('属性','值');

3.3.3、移除属性

element.removeAttribute('属性');

例子

<body>
    <div id="demo" index="1" class="nav"></div>
    <script>
        var div = document.querySelector('div');
        // 1. 获取元素的属性值
        // (1) element.属性
        console.log(div.id);
        //(2) element.getAttribute('属性')  get得到获取 attribute 属性的意思 我们程序员自己添加的属性我们称为自定义属性 index
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));
        // 2. 设置元素属性值
        // (1) element.属性= '值'
        div.id = 'test';
        div.className = 'navs';
        // (2) element.setAttribute('属性', '值');  主要针对于自定义属性
        div.setAttribute('index', 2);
        div.setAttribute('class', 'footer'); // class 特殊  这里面写的就是class 不是className
        // 3 移除属性 removeAttribute(属性)    
        div.removeAttribute('index');
    </script>
</body>

4.节点操作

之前学的都是元素节点，我们来看直接对节点操作，更加简单。

网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。

一般的，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。

元素节点：nodeType 为1
属性节点：nodeType 为2
文本节点：nodeType 为3(文本节点包括文字、空格、换行等)

我们在实际开发中，节点操作主要操作的是元素节点

4.1父节点

node.parentNode

4.2子节点

parentNode.childNodes(标准)

parentNode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合
返回值包含了所有的子结点，包括元素节点，文本节点等
如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

parentNode.children(非标准)

parentNode.children 是一个只读属性，返回所有的子元素节点
它只返回子元素节点，其余节点不返回（这个是我们重点掌握的）
虽然 children 是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用

<body>
    <ul>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ul>
    <ol>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
        <li>我是li</li>
    </ol>
    <script>
        // DOM 提供的方法（API）获取
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');
        // 1. 子节点  childNodes 所有的子节点 包含 元素节点 文本节点等等
        console.log(ul.childNodes);
        console.log(ul.childNodes[0].nodeType);
        console.log(ul.childNodes[1].nodeType);
        // 2. children 获取所有的子元素节点 也是我们实际开发常用的
        console.log(ul.children);
    </script>
</body>

4.2.1、第一个子结点

parentNode.firstChild

firstChild 返回第一个子节点，找不到则返回null
同样，也是包含所有的节点

4.2.2、最后一个子结点

parentNode.lastChild

lastChild 返回最后一个子节点，找不到则返回null
同样，也是包含所有的节点

<body>
    <ol>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        // 1. firstChild 第一个子节点 不管是文本节点还是元素节点
        console.log(ol.firstChild);
        console.log(ol.lastChild);
        // 2. firstElementChild 返回第一个子元素节点 ie9才支持
        console.log(ol.firstElementChild);
        console.log(ol.lastElementChild);
        // 3. 实际开发的写法  既没有兼容性问题又返回第一个子元素
        console.log(ol.children[0]);			//第一个子元素节点
        console.log(ol.children[ol.children.length - 1]);//最后一个子元素节点
    </script>
</body>

4.3、兄弟节点

4.3.1、下一个兄弟节点

node.nextSibling

nextSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null
同样，也是包含所有的节点

4.3.2、上一个兄弟节点

node.previousSibling

previousSibling 返回当前元素上一个兄弟元素节点，找不到则返回null
同样，也是包含所有的节点

4.4、创建节点

document.createElement('tagName');

document.createElement() 方法创建由 tagName 指定的HTML 元素
因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点

4.4.1、添加节点

node.appendChild(child)

node.appendChild() 方法将一个节点添加到指定父节点的子节点列表末尾。类似于 CSS 里面的 after 伪元素。

node.insertBefore(child,指定元素)

node.insertBefore() 方法将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。

<body>
    <ul>
        <li>123</li>
    </ul>
    <script>
        // 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
        // 先获取父亲ul
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我们想要页面添加一个新的元素分两步: 1. 创建元素 2. 添加元素
    </script>
</body>

4.4.2、删除节点

node.removeChild(child)

node.removeChild()方法从 DOM 中删除一个子节点，返回删除的节点

4.4.3、复制节点(克隆节点)

node.cloneNode()

node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点
如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点
如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点

5.高级事件

5.1注册事件

注册事件有两种方式：传统方式和方法监听注册方式

我们来看一看方法监听注册方式

①addEventListener事件监听方式

eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上
当该对象触发指定的事件时，就会执行事件处理函数

eventTarget.addEventListener(type,listener[,useCapture])

该方法接收三个参数：

type:事件类型字符串，比如click,mouseover,注意这里不要带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

<body>
    <button>传统注册事件</button>
    <button>方法监听注册事件</button>
    <button>ie9 attachEvent</button>
    <script>
        var btns = document.querySelectorAll('button');
        // 1. 传统方式注册事件
        btns[0].onclick = function() {
            alert('hi');
        }
        btns[0].onclick = function() {
                alert('hao a u');
            }
            // 2. 事件监听注册事件 addEventListener 
            // (1) 里面的事件类型是字符串 所以加引号 而且不带on
            // (2) 同一个元素 同一个事件可以添加多个侦听器（事件处理程序）
        btns[1].addEventListener('click', function() {
            alert(22);
        })
        btns[1].addEventListener('click', function() {
                alert(33);
            })
            // 3. attachEvent ie9以前的版本支持
        btns[2].attachEvent('onclick', function() {
            alert(11);
        })
    </script>
</body>

5.2删除事件

5.2.1.removeEventListener删除事件方式

eventTarget.removeEventListener(type,listener[,useCapture]);

该方法接收三个参数：

type:事件类型字符串，比如click,mouseover,注意这里不要带on
listener：事件处理函数，事件发生时，会调用该监听函数
useCapture：可选参数，是一个布尔值，默认是 false。学完 DOM 事件流后，我们再进一步学习

5.2.2、传统事件删除方式

eventTarget.onclick = null;

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        var divs = document.querySelectorAll('div');
        divs[0].onclick = function() {
            alert(11);
            // 1. 传统方式删除事件
            divs[0].onclick = null;
        }
        // 2.removeEventListener 删除事件
        divs[1].addEventListener('click',fn);   //里面的fn不需要调用加小括号

        function fn(){
            alert(22);
            divs[1].removeEventListener('click',fn);
        }
        // 3.IE9 中的删除事件方式
        divs[2].attachEvent('onclick',fn1);
        function fn1() {
            alert(33);
            divs[2].detachEvent('onclick',fn1);
        }
    </script>

</body>

5.3DOM 事件流

5.3.1、捕获阶段

document -> html -> body -> father -> son

两个盒子嵌套，一个父盒子一个子盒子，我们的需求是当点击父盒子时弹出 father ，当点击子盒子时弹出 son

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
        // dom 事件流 三个阶段
        // 1. JS 代码中只能执行捕获或者冒泡其中的一个阶段。
        // 2. onclick 和 attachEvent（ie） 只能得到冒泡阶段。
        // 3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段  document -> html -> body -> father -> son
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
             alert('son');
        }, true);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, true);
    </script>
</body>

5.3.2、冒泡阶段

son -> father ->body -> html -> document

<body>
    <div class="father">
        <div class="son">son盒子</div>
    </div>
    <script>
		// 4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段  son -> father ->body -> html -> document
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        var father = document.querySelector('.father');
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        })
    </script>
</body>

德莱文.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js的dom

1.获取元素1.1 获取页面的元素使用 getElementByld() 方法可以获取带ID的元素对象doucument.getElementByld('id名')1.2 根据标签名获取使用 getElementByTagName() 方法可以返回带有指定标签名的对象的集合doucument.getElementsByTagName('标签名');1.3 通过H5新增方法获取①getElementsByClassName根据类名返回元素对象合集documen..
复制链接

扫一扫