个人学习笔记——Javascript基础学习---DOM基础（阶段总结）

小白爱学$

已于 2022-04-02 07:59:17 修改

阅读量586

点赞数 2

文章标签： javascript

于 2022-04-01 11:50:31 首次发布

本文链接：https://blog.csdn.net/m0_59684224/article/details/123893970

版权

DOM核心内容（基础部分）

文档对象模型（Document Object Model），处理可扩展标记语言的标准接口

我们获取过来的DOM元素是一个对象，所以称为文档对象模型

文档Document 元素 Element 节点 Node 标签名 tagName 类名className

文档流 document stream

在这里插入图片描述

获取body元素

document.body

获取html元素

document.documentElement

事件的概述

事件就是触发响应的的事件

事件的组成:

事件源（获取事件源的方法看下面的5–查）
事件类型 (添加事件绑定事件)
事件处理程序 (采取函数赋值的方法)

鼠标事件

在这里插入图片描述

关于DOM的操作，主要是针对元素的操作

主要有创建、增、删、改、查、属性操作、事件操作

1–创建

document.write
element.innerHTML
document.createElement

**document.write**

Document.write（） 方法将一个文本字符串写入一个由 document.open（） 打开的文档流，如果在已经加载完毕页面中调用此方法会导致页面的重绘。

document.write(markup);

markup：一个包含要写入文档的文本的字符串。

**element.innerHTML**

Element.innerHTML 属性设置或获取HTML语法表示的元素的后代。

const content = element.innerHTML;
element.innerHTML = htmlString;

设置元素的将会删除所有该元素的后代并以上面给出的 htmlString 替代。

HTMLString中起始位置到终止位置的全部内容，包括HTML标签，同时保留空格和换行。element.innerText也可以改变内容，可以获取HTMLString中起始位置到终止位置的全部内容，不识别HTML标签，同时去掉空格和换行。

如果要向一个元素中插入一段 HTML，而不是替换它的内容，那么请使用 insertAdjacentHTML（） 方法。

**Document.createElement（）**

在 HTML 文档中，Document.createElement（） 方法用于创建一个由标签名称 tagName 指定的 HTML 元素。如果用户代理无法识别 tagName，则会生成一个未知 HTML 元素 HTMLUnknownElement。

var element = document.createElement(tagName[, options]);

innerHTML创建多个元素效率更高（不要拼接字符串，采用数组的形式拼接）结构稍微复杂。

//将字符串添加到数组中
var arr=[];
for(var i=0;i<=100;i++){
	arr.push('百度')
}
//将数组转换为字符串,添加到文档中
inner.innerHTML=arr.join('');

2–增

node.appendChild(aChild)
-node.insertBefore()

node.appendchild(child)添加创建的元素节点.是给父元素下的列表的最后添加类似于css中的::after类似于push

element.appendChild(aChild)

**Node.insertBefore()** 方法在参考节点之前插入一个拥有指定父节点的子节点

node.insertBefore(child,指定元素)

var li=document.createElement('li');
//获取父项
var ul = querySelector('ul');
//添加子项到父项中,后面追加元素 类似于push
ul.appendChild(li);
//添加节点到指定位置的前面
ul.insertBefore(li , child[0])
//两步  1 创建元素  2添加元素

3–删

node.removeChild(child);

删除父节点下的子节点

var ul=document.querySelector('ul');
ul.removeChild(ul.children[0]);

//使用时 如果父元素没有了子元素,那么这个属性就会报错
//可以添加判断.在没有时返回null

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            padding: 100px;
        }

        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            outline: none;
            resize: none;
        }

        ul {
            margin-top: 50px;
        }

        li {
            width: 300px;
            padding: 5px;
            background-color: rgb(245, 209, 243);
            color: red;
            font-size: 14px;
            margin: 15px 0;
        }

        a {
            text-decoration: none;
            color: #eee;
            font-size: 14px;
            float: right;

        }
    </style>

删除评论
   
<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>

    </ul>
<script>
        var text = document.querySelector('textarea');
        var btn = document.querySelector('button');
        var ul = document.querySelector('ul');
        btn.onclick = function () {
            var flag = 0;
            if (text.value == '') {
                alert('请输入内容');
            } else {
                var li = document.createElement('li');
                //innerHTML可以读取HTML标签
                li.innerHTML = text.value + '<a href="javascript:;">删除</a>';

                // 注意书写时使用驼峰命名法
                // ul.appendChild(li);
                ul.insertBefore(li, ul.children[0]);
                //注意结构的书写位置,应该在生成列表之后获取
                var as = document.querySelectorAll('a')
                for (i = 0; i < as.length; i++) {
                    as[i].onclick = function () {
                        // 要删除的是li,需要找他的父元素
                        ul.removeChild(this.parentNode);
                    }
                }
                flag = 1;
            }
            if (flag = 1) {
                text.value = '';
            }

        }
    </script>
</body>

4–改

主要修改dom恶元素属性。dom元素的内容、内容、表单的值等

修改元素属性：src 、href /、title
修改普通元素的内容： innerHTML、 innerText
修改表单元素： value 、 type disabled（按钮禁用）
修改元素的样式：type、 className

5-查

主要获取查询dom的元素

DOM提供的API方法：getElementById、getElementsByTagName、getElententsByClassName
H5 提供的新方法：document.querySelector()、document.querySelectorAll()
利用节点操作获取元素：node.parentNode（父），children（子），previousElementSibling/nextElementSibling（兄弟）

document.getElementById返回一个匹配特定的ID元素

document.getElementsByTagName返回一个包括所有给定标签名称的元素的HTML集合。整个文件结构都会被搜索，包括根节点。

decoment.getElementsByClassName返回一个包含了所有指定类名的子元素的类数组对象。当在document对象上调用时，会搜索整个DOM文档，包含根节点。你也可以在任意元素上调用getElementsByClassName()方法，它将返回的是以当前元素为根节点，所有指定类名的子元素

document.querySelector()文档对象模型Document引用的**querySelector()**方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项，则返回null。

var element = document.querySelector(selectors);
//注意是匹配的第一个element对象
var el=document.querSelector('.className'); //匹配类名加‘.’
var el=document.querSelector('#id');//匹配id加‘#’
var el=document.querSelector('li');//匹配HTML标签

//还可以更强大
<div class="user-panel main">
    <input name="login">
    </div>;
<script>
        var el = document.querySelector("div.user-panel.main input[name='login']");
</script>

转义特殊字符

如果要匹配的ID或选择器不符合 CSS 语法（比如不恰当地使用了冒号或者空格），你必须用反斜杠将这些字符转义。由于 JavaScript 中，反斜杠是转义字符，所以当你输入一个文本串时，你必须将它转义两次（一次是为 JavaScript 字符串转义，另一次是为 querySelector 转义.

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log('#foo\bar')               // "#fooar"
  document.querySelector('#foo\bar')    // 不匹配任何元素

  console.log('#foo\\bar')              // "#foo\bar"
  console.log('#foo\\\\bar')            // "#foo\\bar"
  document.querySelector('#foo\\\\bar') // 匹配第一个div

  document.querySelector('#foo:bar')    // 不匹配任何元素
  document.querySelector('#foo\\:bar')  // 匹配第二个div
</script>

document.querySelectorAll()返回与指定的选择器组匹配的文档中的元素列表,和querySelector；类似，但这个返回的是一个Nodelist.

node.parentNode//获取最近的父节点、

parentNode.childNodes//返回的是所有子节点的集合，该集合是即时更新的，但是包含元素节点和文本节点等

注意：如果只想获取元素节点，需要处理一下

var ul =document.querySelector('ul');
for(var i=0;i<ul.length;ul.childNodes.length;i++){
	if(ul.childNodes[i].noceType == 1){
		//ul.childNodes[i]是元素节点
		colose.log(ul.childNodes[i]);
	}
}

parentNode.children//获取子元素节点。非标准，但大多数浏览器支持

parentNode.firstChild
获取第一个子节点,但是会获取所有的子节点,包括文本节点等

parentNode.lastChild

获取最后一个子元素节点,同样包括文本节点等

//但是这个有着兼容性的问题,只有IE9+才支持
parentNode.firstElementChild

可以获取第一个子元素节点

parentNode.firstElementChild

可以获取最后一个子元素节点

//最后一个可以很好地使用的
parentNode.children[0];

获取第一个子元素节点

parentNode.children[parentNode.children.length - 1];

获取最后一个子元素节点

复制节点

node.cloneNode();方法返回调用该方法的节点的一个副本.也称为克隆节点

并且该方法需要appendChild配合添加

node.cloneNode();括号里面为空,或者为false,只是浅拷贝.只复制节点本身,不克隆里面的子节点

如果为true,则是深拷贝,会复制里面的节点,以及里面所有的的子节点

Node.nodeType

只读属性表示的是该节点的类型。**Node.nodeType**

nodeType 属性可用来区分不同类型的节点，比如 元素， 文本 和 注释。

在这里插入图片描述

附加一个案例

//表格添加数据(重要)


<body>
    <table border="1">
        <thead>
            <th>姓名</th>
            <th>学科</th>
            <th>成绩</th>
            <th>操作</th>
        </thead>
        <tbody>

        </tbody>
    </table>
    <script>
        //因为没有学到数据库，只好写个数组来获取数据。
        var arr = [
            {
                name: '溥仪',
                subject: 'javascript',
                grade: 100,
            },
            {
                name: '溥修',
                subject: 'javascript',
                grade: 89,
            },
            {
                name: '溥浩',
                subject: 'javascript',
                grade: 80,
            },
            {
                name: '溥博',
                subject: 'javascript',
                grade: 95,
            }
        ];
        var tbody = document.querySelector('tbody');
        for (var i = 0; i < arr.length; i++) {
            var tr = document.createElement('tr');
            tbody.appendChild(tr);
            for (k in arr[i]) {
                var td = document.createElement('td');//运行一次,添加一个节点
                td.innerHTML = arr[i][k];
                tr.appendChild(td);
            }
            var td = document.createElement('td');
            tr.appendChild(td);
            td.innerHTML = '<a href="javascript:;">删除</a>';
            var as = document.querySelectorAll('a');//逻辑要清楚啊,这里获取的是所有的a
            for (var j = 0; j < as.length; j++) {
                // 这里也是要给所有的a添加属性
                as[j].onclick = function () {
                    // 注意删除的是a父亲的父亲,
                    tbody.removeChild(this.parentNode.parentNode);
                }
            }
  </body>

<style>
        table {
            width: 500px;
            margin: 100px auto;
			text-align:center;
        }

        thead {
            height: 40px;
            background-color: rgb(18, 158, 228);
        }

        td {
            border: rgb(18, 214, 228) 1px solid;
            height: 40px;
        }
		 a {
            text-decoration: none;
            color: #333;
        }
    </style>