JS HTML DOM操作

最新推荐文章于 2022-08-25 18:57:12 发布

月下ctrlc

最新推荐文章于 2022-08-25 18:57:12 发布

阅读量121

点赞数

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

本文链接：https://blog.csdn.net/qq_44625142/article/details/105470552

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

JS HTML DOM

DOM简介
DOM HTML
DOM CSS
DOM事件
DOM EventListener
DOM元素
HTML Collection对象
NodeList对象

DOM简介

HTML DOM(文档对象模型)
通过HTMl DOM，可访问JS文档的所有元素
当网页被加载时，浏览器创建页面的文档对象模型(Docement Object Model)
HTML DOM模型被构造为对象的树
通过可编程的对象模型，JS获得了足够的能力来创建动态的HTML,表现在JS能够改变页面中的所有HTML元素、HTML属性、CSS样式并对所有事件做出反应
那么如何查找HTML元素？

通过id查找HTML元素
var x = document.getElementById(“intro”); //没有找到返回null
通过标签名查找HTML元素
var x = document.getElementsByTagName(“p”); //伪数组
通过类名找到HTML元素
var x = document.getElementsByClassName(“intro”); //伪数组
通过属性名找到HTML元素
var x = document.querySelector(“intro”);

DOM HTML

HTML DOM 允许 JavaScript 改变 HTML 元素的内容,其改变的方式有:

改变HTML输出流
在JS中，document.write()方法可用于直接向输出流写内容，但不要在文档加载完成后使用document.write()，这会覆盖文档
改变HTML内容
使用innerHTML属性，可以改变元素的内容
改变HTML属性
document.getElementById(id).attribute = 新属性值

DOM CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=新样式

DOM事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
οnclick=JavaScript

HTML 事件的例子：
当用户点击鼠标时 onclick
当网页已加载时 onload
当鼠标移动到元素上时 onmouseover
当提交 HTML 表单时 omsubmit
and more

这是使用HTML元素分配事件，使用的是HTML事件属性

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>

使用 HTML DOM来分配事件

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

大多时候这样使用

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>

常用事件：
onload 和 onunload 事件
onload事件表是页面加载完成之后，也就是用户进入时触发，可用于检测浏览器类型和浏览器版本，用来加载网页的正确版本，onunload事件在用户离开后出发。它们可用于处理cookie
onchange 事件
onchange事件常结合对输入字段的验证来使用
onmousedown 点下鼠标出发
onmouseup 松开鼠标触发
onclick 完成点击时触发

DOM EventListener

addEventListener() 方法

addEventListener方法用于向指定元素添加事件句柄

element.addEventListener("click", function(){ alert("Hello World!"); });

其添加的事件句柄不会覆盖已存在的事件句柄
你可以向一个元素添加多个事件句柄

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

你可以向同个元素添加多个同类型的事件句柄，如两个"click"事件
你可以向任何DOM对象添加事件监听，如window对象

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

其可以更简单地控制事件
当你使用方法时，JS从HTML标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听
使用removeEventListener()来移除监听

element.removeEventListener("mousemove", myFunction);

语法 element.addEventListener(event,function,useCapure)
事件传递有两种方式 :冒泡与捕获
冒泡就是先出发内部的事件，再往外依次触发
捕获则相反
useCapture参数默认为false，表示冒泡事件，true将修改为捕获
传递参数(当传递参数值时，使用匿名函数调用带参数的函数)

element.addEventListener("click", function(){ myFunction(p1, p2); });

浏览器支持
表格中的数字表示支持该方法的第一个浏览器的版本号

方法	chrome	IE	Firefox	Safari	Opera
addEventListener()	1.0	9.0	1.0	1.0	7.0
removeEventListener()	1.0	9.0	1.0	1.0	7.0

注意： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

element.attachEvent(event, function);
element.detachEvent(event, function);

11.兼容写法(IE9)

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

DOM元素

HTML DOM元素，又称节点，主要介绍它的创建添加和移除

创建新的HTML元素
使用方法createElement()创建元素节点
使用方法cteateTextNode创建文本节点
使用方法appendchild()进行尾部添加元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);

var element = document.getElementById("div1");
element.appendChild(para);
</script>

使用insertBefore实现头部添加元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

2.移除元素(removeChild)
要移除一个元素，你需要知道该元素的父元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

如果能够在不引用父元素的情况下删除某个元素，就太好了，不过很遗憾，DOM 需要清楚您需要删除的元素，以及它的父元素，但是这样就要获取两个元素，很麻烦，我们通常使用:

var child = document.getElementById("p1");
child.parentNode.removeChild(child);

3.替换(replaceChild)
我们可以使用replaceChild方法替换一个元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

HTML Collection对象

Collection对象
getElementsByTagName() 方法返回 HTMLCollection 对象
HTMLCollection 对象类似包含 HTML 元素的一个数组
集合中的元素可以通过索引来访问

var x = document.getElementsByTagName("p");

有length属性

var myCollection = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = myCollection.length;

但无法使用数组的方法
是一个伪数组

NodeList对象

NodeList对象是一个从文档中获取的节点列表(集合)
NodeList对象类似Collection对象
一些旧版本的浏览器的方法，如getElementsByClassName返回的是NodeList对象，而不是Collection
所有浏览器的childNodes属性返回的都是NodeList对象
大部分浏览器的querySelectorAll()返回的是NodeList对象
有length属性
无法使用数组的方法
NodeList和Collection的区别
HTML Collection是HTML元素的集合，NodeList是文档节点的集合
HTML Collection元素可以通过name、id或者索引获取，NodeList只能通过索引获取
NodeList是DOM节点数量和类型的对照，对节点增删，NodeList感觉不到。但对节点内容修改可以感觉到，比如修改innerHTML，而Collection是live绑定的，对节点的增删是敏感的

plist = document.quetySelectorAll("p");
pcoll = document.getElementsByTagName("p");
//以上plist返回的就是固定的值，而pcoll会随着html页面变化，如添加或者移除p标签，发生相应的改变

我的分享就到这里了，谢谢大家

月下ctrlc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS HTML DOM操作

JS HTML DOMDOM简介DOM HTMLDOM CSSDOM事件DOM EventListenerDOM元素HTML Collection对象NodeList对象DOM简介HTML DOM(文档对象模型)通过HTMl DOM，可访问JS文档的所有元素当网页被加载时，浏览器创建页面的文档对象模型(Docement Object Model)HTML DOM模型被构造为对象的树通过...
复制链接

扫一扫