Javascript高级技术（DOM操作详解）

最新推荐文章于 2023-12-14 09:53:32 发布

小六子666666

最新推荐文章于 2023-12-14 09:53:32 发布

阅读量419

点赞数

分类专栏： JavaScript重新学习、捡漏

本文链接：https://blog.csdn.net/qq_40862118/article/details/106300656

版权

JavaScript重新学习、捡漏专栏收录该内容

12 篇文章 1 订阅

订阅专栏

Javascript高级技术

获取页面元素

API	参数	返回值	方法解释
document.getElementById()	ID	Element对象	通过ID获取页面的标签
document.getElementByTagName()	TagName	Element对象的集合（`伪数组`）	通过标签名获取页面的元素集合
element.getElementByTagName()	TagName	Element对象的集合（`伪数组`）	通过父元素使用子元素的标签名获取子元素集合
document.getElementByClassName()	ClassName	Element对象的集合（`伪数组`）H5新方法	通过类名获取页面的元素集合
document.querySelector()	选择器（ID、TagName、ClassName）	指定选择器的第一个元素对象	<- 注意只能选择一个
document.querySelectorAll()	选择器（ID、TagName、ClassName）	指定选择器的全部元素对象	<- 注意选择全部
docement.body	-----	获取body对象
docement.documentElement	-----	返回HTML元素对象

选择器选项需要加符号：#ID、TagName、.ClassName

documentElement、body没有参数

加粗的选项是H5新增的，对于老版本的浏览器有兼容性问题

typeof 检测元素类型
console.dir() 打印返回的元素对象，更好的查看

什么是伪数组

拥有 length 属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)
不具有数组所具有的方法

事件问题

事件的三要素：事件源、事件类型、事件处理程序

常用的鼠标事件类型

事件类型	功能
onclick	鼠标点击事件
onmouseover	鼠标经过
onmouseout	鼠标离开
onfocus	获取焦点
onblur	失去焦点
onmousemove	鼠标移动
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

案例：

<body>
    <div id="app">获取元素</div>
    <script type="text/javascript">
        const app = document.getElementById("app")
        app.onclick = function () {
            console.log("我怕被点击了")
        }
    </script>
</body>

案例结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VorPAgLO-1590218023815)(C:\Users\小胡同学\AppData\Roaming\Typora\typora-user-images\image-20200522114105187.png)]

DOM操作元素

改变元素内容方法	区别
Element.innerText	修改内容，不会转义HTML标签，去掉空格和换行
Element.innerHtml	修改内容，同时转义HTML标签，保留空格和换行

以上两个方法可以获取内容也可以通过赋值的方式修改其中的内容

<body>
    <div id="app">获取元素</div>
    <script type="text/javascript">
        const app = document.getElementById("app")
        app.onclick = function () {
            //获取元素的内容
            console.log(app.innerHTML)
            //修改元素的内容
            app.innerHTML = "<h1>你好啊</h1>"
        }
    </script>
</body>

修改元素的属性	详情
element.src = value	修改img对象的src属性
element.href= value	修改元素对象的href属性
element.title= value	修改元素对象的title属性
element.alt= value	修改元素对象的alt属性
element.id= value	修改元素对象的id属性
element.className = value	修改元素对象的class属性
element.style.color = value – 其余的雷同	修改元素对象的style属性
修改表单元素的属性	详情
inputElement.value = value
inputElement.disabled = true \| false
inputElement.type = type
inputElement.selected = true \| false
inputElement.checked = true \| false
获取元素的属性	详情
element.getAttribute(‘属性’)	获取元素的属性

获取属性和设置属性、移除属性

获取属性和设置属性方法	区别
element.属性名	一般是获取内置的属性
element.getAttribute(‘属性’)	获取自定义的属性
element.属性名 = value	设置内置属性的值
element.setAttribute(‘属性名’,‘属性值’)	设置自定义属性的值
element.removeAttribute(“属性名”)	取消元素的属性

注：element.属性名（class应该是className） | setAttribute(‘属性名’,‘属性值’) （class不变）

H5自定义属性以及获取自定义属性的方法：有兼容性问题-IE11

以**data-**开头的属性就是自定义的属性；
element.dataset.属性名 | element.dataset[“属性名”] 可以获取对应的元素

节点操作

节点元素必备：nodeType、nodeName、nodeValue

nodeType分类	value
元素节点（主要操作）	1
属性节点	2
文本节点	3

获取节点操作

操作	详情
element.parentNode	获取元素的父亲节点
element.childNodes	获取元素的子节点的集合（元素节点、文本节点）
element.children	获取元素的子节点的集合（元素节点）
element.firstChild	获取第一个子节点（元素节点、文本节点）
element.lastChild	获取最后一个子节点（元素节点、文本节点）
element.firstElementChild	获取第一个子节点（元素节点） --兼容性问题IE9 可转化为【element.children[0]】
element.lastElementChild	获取最后一个子节点（元素节点）–兼容性问题IE9可转化为【element.children[element.children.length-1]】
element.nextSibling	获取下一个兄弟节点（元素节点、文本节点）
element.previousSibling	获取上一个兄弟节点（元素节点、文本节点）
element.nextElementSibling	获取下一个兄弟节点（元素节点）–兼容性问题IE9
element.previousElementSibling	获取上一个兄弟节点（元素节点）–兼容性问题IE9

创建节点

操作	详情
document.createElement(“tagName”) 通过appendChild(创建的元素)添加到页面上 - 在后边插入	创建元素并且添加到页面上
document.createElement(“tagName”) 通过insertBefore(创建的元素,指定的元素)**添加到页面上	在指定元素前添加元素
element.removeChild(element)	删除孩子节点
element.cloneNode()	克隆元素，返回一个node元素

element.cloneNode() 参数没有或者是false则为浅拷贝，只复制标签，如果是true则是深度拷贝，会复制里边的内容

三种动态创建元素的区别

操作	优点	缺点
document.write()		直接将文本写入页面的内容流，会导致页面的重绘
innerHTML	创建多个元素效率更高（你要采用字符串拼接的方式，需要采用数据的拼接形式）
createElement()	创建多个元素效率稍微有一点低，但不会造成页面的重绘

小六子666666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript高级技术（DOM操作详解）

Javascript高级技术获取页面元素API参数返回值方法解释document.getElementById()IDElement对象通过ID获取页面的标签document.getElementByTagName()TagNameElement对象的集合（伪数组）通过标签名获取页面的元素集合element.getElementByTagName()TagNameElement对象的集合（伪数组）通过父元素使用子元素的标签名获取子元素集合doc
复制链接

扫一扫