首页 > 其他分享> 文章详细

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

2020-06-11 23:03:52 阅读：203 来源： 互联网

标签：DOM 元素 ul querySelector var 操作 div document 节点

初学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>

有什么问题欢迎指正呀~

标签：DOM,元素,ul,querySelector,var,操作,div,document,节点
来源： https://blog.csdn.net/weixin_45638522/article/details/106652335

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

ICode9