DOM基础，获取元素，事件基础，操作元素，节点操作

2024-03-29 17:37:46

初学DOM，将DOM部分归纳一下，从获取元素，事件基础，操作元素方面
这里pick pink老师讲的真的超级细

首先，先看一下DOM树（这张图做的有点糙，请见谅见谅哈）

文档：一个页面就是一个文档，在DOM中使用document
元素：页面中所有的标签都是，在DOM中使用element
节点：页面中所有的内容都是，在DOM中使用node
这些都是对象

一、获取元素

注意从上到下加载，所以要先有标签，后有JS

1.获取ID

document.getElementById( );

注意

参数是大小写敏感的字符串，就是说注意加单引号
返回的是一个元素的对象object
只能用于document上
精确地查找一个元素，因为ID具有唯一性

<body>
    <p id="header">张三</p>
    <script>
        var p = document.getElementById('header');
        console.log(p);
    </script>
</body>

2、获取标签

document.getElementsByTagName( );

注意：

取过来是元素对象的集合，以 伪数组 的形式存储
可以在任意父元素上
返回的是一个集合，方便遍历，得到的元素集合是动态的

<body>
    <p>一</p>
    <p>二</p>
    <p>三</p>
    <script>
        var p = document.getElementsByTagName('p');
        console.log(p);
    </script>
</body>

3.通过name属性进行查找

document.getElementsByName( );

<body>
    <input type="radio" value="a" name="sex1">男
    <input type="radio" value="b" name="sex1">女
    <script>
        var p = document.getElementsByName('sex1');
        console.log(p);
    </script>
</body>

以下是HTML5中的

4.查找指定的class

document.getElementsByClassName( );

<body>
    <p class="text">张三</p>
    <p class="text">李四</p>
    <script>
        var a = document.getElementsByClassName('text');//在这个地方参数这儿，不用加.哦
        console.log(a);
    </script>
</body>

5.只找一个元素

document.querySelector( );

注意

返回的是第一个对象
切记要加选择器的符号

<body>
    <p class="text">张三</p>
    <p class="text">李四</p>
    <script>
        var a = document.querySelector('.text');//这里要加.的哦。。。。如果是ID选择器加#，但是这个后台只显示张三
        console.log(a);
    </script>
</body>

6.找多个元素

返回的是非动态集合

<body>
    <p class="text">张三</p>
    <p class="text">李四</p>
    <script>
        var a = document.querySelectorAll('.text');//后台两个都显示
        console.log(a);
    </script>
</body>

二、事件基础

事件的三个部分

事件源（事件被触发的对象）
事件类型（通过什么触发的是鼠标单击，还是鼠标经过还是…）
事件处理的方式（通常通过一个函数来完成）

<body>
    <p class="text">张三</p>
    <p class="text1">李四</p>
    <script>
        //1. 获取事件源
        var a = document.querySelector('.text');
        //2. 绑定事件
        // .onclick
        // 3.添加处理事件的程序
        a.onclick = function() {
            alert('现在是六月');
        }
    </script>

三、操作元素

1.改变元素

element.innerText = ( );

element.innerHTML = ( );

注意

innerHTML符合w3c的标准，所以换行（/n）这之类的可以识别，然而另一个不行
这两个标签都可以读写

<body>
    <p class="text">张三</p>
    <p class="text1">李四</p>
    <script>
        //1. 获取事件源
        var a = document.querySelector('.text');
        //2. 绑定事件
        // .onclick
        // 3.添加处理事件的程序
        a.onclick = function() {
            a.innerText = ('王五');
        }
    </script>
</body>

<body>
    <p class="text">张三</p>
    <p class="text1">李四</p>
    <script>
        //1. 获取事件源
        var a = document.querySelector('.text');
        //2. 绑定事件
        // .onclick
        // 3.添加处理事件的程序
        a.onclick = function() {
            a.innerHTML = ('王五');
        }
    </script>
</body>

2.改变图片、链接

src herf 属性

<body>
    <button id="a">小花</button>
    <button id="b">小草</button>
    <img id="c" src="xiaohua.jpg">
    <script>
        //1. 获取事件源
        var a = document.getElementById('a');
        var b = document.getElementById('b');
        var c = document.getElementById('c');

        //2. 绑定事件
        // .onclick
        // 3.添加处理事件的程序
        b.onclick = function() {
            c.src = "xiaocao.jpg";
        }
        a.onclick = function() {
            c.src = "xiaohua.jpg";
        }
    </script>
</body>

3.表单

可以通过改变value，type 等值来实现目的

<body>
    <button id="a">按钮</button>
    <input type="text" id="b" value="请输入搜索内容">
    <script>
        //1. 获取事件源
        var a = document.getElementById('a');
        var b = document.getElementById('b');
        //2. 绑定事件
        // .onclick
        // 3.添加处理事件的程序
        a.onclick = function() {
            b.value = '被点击了';
        }
    </script>
</body>

4.样式属性

注意

属性名是驼峰命名法
js是加的是行内样式，权重高

<body>
    <div id="c">
        <button id="a">按钮</button>
        <input type="text" id="b" value="请输入搜索内容">
    </div>
    <script>
        //1. 获取事件源
        var a = document.getElementById('a');
        var b = document.getElementById('b');
        var c = document.getElementById('c');
        //2. 绑定事件
        // .onclick
        // 3.添加处理事件的程序
        a.onclick = function() {
            b.value = '被点击了';
            c.style.backgroundColor = 'pink';
        }
    </script>
</body>

5.排他思想

首先排除其他人，再设置自己

6.获得属性值

element.getAttribute(‘属性’)；

与 element.属性的区别是可以添加自定义的属性值
HTML5中一般我们自定义的属性我们用data- 开头

<body>
    <div id="demo">
    </div>
    <script>
        var div = document.querySelector('div');
        console.log(div.getAttribute('id'));
    </script>
</body>

<body>
    <div id="demo" data-index="demo1">//data-index属于自定义的属性
    </div>
    <script>
        var div = document.querySelector('div');
        console.log(div.getAttribute('data-index'));
    </script>
</body>

7.修改属性值

element.setAttribute(‘属性’, ‘值’);

与 element.属性=‘值’ 的区别是可以更改自定义的属性值

、<body>
    <div id="demo" data-index="demo1">
    </div>
    <script>
        var div = document.querySelector('div');
        div.setAttribute('data-index', 'demo2');
    </script>
</body>

8.移除属性

element.removeAttribute(‘属性’);

<body>
    <div id="demo" data-index="demo1">
    </div>
    <script>
        var div = document.querySelector('div');
        div.removeAttribute('data-index');
    </script>
</body>

9.获取自定义属性

HTML5中有这种方式获得属性

div.dataset.index;//这里的dataset相当于一个集合，index是我自己定义的属性

四、节点操作

每个节点至少拥有nodeType节点类型，nodeName节点名称，nodeValue节点值
nodeType的值
元素节点为 1
属性节点为 2
文本节点为 3

1.父级节点

element.parentNode;

得到最近的父节点，如果没有返回为空

<body>
    <div id="demo">
        <p></p>
    </div>
    <script>
        var p = document.querySelector('p');
        console.log(p.parentNode);
    </script>
</body>

2.子节点

a. 所有节点element.childNodes

得到所有的子节点，包括换行之类的

<body>
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        console.log(ol.childNodes);
    </script>
</body>

b.只获得元素节点element.children

<body>
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>

    </ol>
    <script>
        var ol = document.querySelector('ol');
        console.log(ol.children);
    </script>
</body>

c.获取第一个或者最后一个节点

parentnode.firstChild；

parentnode.lastChild;

注意是所有节点中的第一个或者最后一个，实际用处不大QAQ

<body>
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        console.log(ol.firstChild);
    </script>
</body>

d.获取第一个或者最后一个元素节点（IE9以上支持）

parentnode.firstElementChild；

parentnode.lastElementChild;

<body>
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <script>
        var ol = document.querySelector('ol');
        console.log(ol.firstElementChild);
    </script>
</body>

3.兄弟节点

a. 下一个兄弟节点 node.nextSibling;

上一个兄弟节点node.previousSibling;

<body>
    <div></div>
    <p></p>
    <script>
        var div = document.querySelector('div');
        console.log(div.nextSibling);
    </script>
</body>

b. 下一个兄弟元素节点 node.nextElementSibling;

上一个兄弟元素节点node.previousElementSibling;

<body>
    <div></div>
    <p></p>
    <script>
        var div = document.querySelector('div');
        console.log(div.nextElementSibling);
    </script>
</body>

4.创建节点

document.createElement(‘li’);

<body>
    <ul>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        var li = document.createElement('li'); //创建节点
        ul.appendChild(li); //添加节点
    </script>
</body>

5.添加节点

a. 父.appendChild(子);

<body>
    <ul>
        <li></li>
        <li></li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        var li = document.createElement('li'); //创建节点
        ul.appendChild(li); //添加节点
    </script>
</body>

b. node.insertBefore(孩子，指定元素);

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

6.删除节点

父.removeChild(子);

<body>
    <ul>
        <li>一</li>
        <li>二</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.removeChild(ul.children[0]);
    </script>
</body>

7.拷贝节点

内容.cloneNode(true)；

<body>
    <ul>
        <li>一</li>
        <li>二</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        var lili = ul.children[0].cloneNode(true); //1.括号里填true  是深拷贝，复制里面的内容加标签   2.不填或者是填false的话，是浅拷贝，只是标签
        ul.appendChild(lili);
    </script>
</body>

有什么问题欢迎指正呀~

码农公寓