评论

【笔记】JS——操作DOM结点的总结

关于DOM的w3c文档学习笔记总结

HTML DOM(文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

通过 HTML 对象选择器查找 HTML 对象

本例查找 id=“frm1” 的 form 元素,在 forms 集合中,然后显示所有元素值,包含在

document.elements中,通过x.elements[i].value来调用,比如一个个input输入的值

DOM动画

应该通过 style = “position: relative” 创建容器元素。

应该通过 style = “position: absolute” 创建动画元素。

上左偏移量在极短的时间内迅速增大而造成了视觉上的“动画”

当用户进入后及离开页面时,会触发 onload 和 onunload 事件。

onload 和 onunload 事件可用于处理 cookie。

例如:if (navigator.cookieEnabled == true)

onchange 和onfocus事件经常与输入字段验证结合使用,鼠标移出输入框时触发,输入框获得焦点时触发

<input type="text" id="fname" onchange="myFunction()" onfocus="this.style.color="yellow"">

function myFunction() {
  var x = document.getElementById("fname");
  x.value = x.value.toUpperCase();
}
onmouseover ,onmousemove和 onmouseout 事件

onmouseover为鼠标刚移入区域;onmousemove为鼠标在区域内移动;onmouseout为移出区域

onmousedown, onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。

首先当鼠标按钮被点击时,onmousedown 事件被触发;然后当鼠标按钮被释放时,onmouseup 事件被触发;最后,当鼠标点击完成后,onclick 事件被触发。

JavaScript HTML DOM 事件监听器

addEventListener() 方法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型(比如 “click” 或 “mousedown”)。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值,指定使用事件冒泡还是事件捕获。此参数是可选的。

**注意:**请勿对事件使用 “on” 前缀;请使用 “click” 代替 “onclick”。

事件冒泡还是事件捕获?

DOM操作

nodeName 属性

nodeName 属性规定节点的名称。

  • nodeName 是只读的

  • 元素节点的 nodeName 等同于标签名

  • 属性节点的 nodeName 是属性名称

  • 文本节点的 nodeName 总是 #text

  • 文档节点的 nodeName 总是 #document

nodeValue 属性

nodeValue 属性规定节点的值。

  • 元素节点的 nodeValue 是 undefined
  • 文本节点的 nodeValue 是文本文本
  • 属性节点的 nodeValue 是属性值

nodeType 属性

nodeType 属性返回节点的类型。nodeType 是只读的。

DOM节点

追加:appendChild()

标签之间插入某新结点insertBefore()

删除结点removeChild()

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

替换结点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>

DOM集合

getElementsByTagName() 方法返回 HTMLCollection 对象。

HTMLCollection 对象是类数组的 HTML 元素列表(集合)。

下面的代码选取文档中的所有 <p> 元素:

实例

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

该集合中的元素可通过索引号进行访问。

如需访问第二个 <p> 元素,您可以这样写:

y = x[1];

length 属性定义了 HTMLCollection 中元素的数量:

length 属性在您需要遍历集合中元素时是有用的:

实例

改变所有 <p> 元素的背景色:

var myCollection = document.getElementsByTagName("p");
var i;
for (i = 0; i < myCollection.length; i++) {
    myCollection[i].style.backgroundColor = "red";
}
无法对 HTMLCollection 使用数组方法,比如 valueOf()、pop()、push() 或 join()。

节点列表,与DOM集合几乎一样

NodeList 对象是从文档中提取的节点列表(集合)。

使用 getElementsByClassName() 方法,某些(老的)浏览器会返回 NodeList 对象而不是 HTMLCollection。

所有浏览器都会为 childNodes 属性返回 NodeList 对象。

大多数浏览器会为 querySelectorAll() 方法返回 NodeList 对象。

总结:

HTMLCollection(前一章)是 HTML 元素的集合;NodeList 是文档节点的集合。

访问 HTMLCollection 项目,可以通过它们的名称、id 或索引号。

访问 NodeList 项目,只能通过它们的索引号。

只有 NodeList 对象能包含属性节点和文本节点。

觉得该篇文章有帮助到你复习操作dom节点的知识,请不要忘记忘记点击左下角的大拇指~

最后一次编辑于  2021-11-17  
点赞 2
收藏
评论

1 个评论

  • 晨曦
    晨曦
    2021-11-17

    学习了。对巩固前端基础挺有用~~

    2021-11-17
    赞同
    回复 1
    • Smooth
      Smooth
      发表于小程序端
      2021-11-17

      一起加油~

      2021-11-17
      1
      回复
登录 后发表内容