HTML Javascript DOM 学习笔记

程序猿online

已于 2023-04-02 16:45:44 修改

阅读量121

点赞数

分类专栏：前端学习文章标签： javascript Powered by 金山文档

于 2023-03-16 17:06:59 首次发布

本文链接：https://blog.csdn.net/xhc6666/article/details/129589800

版权

前端学习专栏收录该内容

29 篇文章 0 订阅

订阅专栏

JavaScript 能做什么

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

查找 HTML元素

通过 id 找到 HTML 元素

<p id="intro">你好世界!</p>

x=document.getElementById("intro");

通过标签名找到 HTML 元素

var x=document.getElementById("main");

通过类名找到 HTML 元素

x=document.getElementsByClassName("intro");

改变HTML 输出流

<!DOCTYPE html>

<html>

<body>

</body>

</html>

绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=新的 HTML

<p id="p1">Hello World!</p>

document.getElementById("p1").innerHTML="新文本!";

</script>

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=新属性值

document.getElementById("image").src="landscape.jpg";

</script>

改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=新样式

<p id="p1">Hello World!</p><p id="p2">Hello World!</p><script>document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger"; </script><p>以上段落通过脚本修改。</p>

使用事件

<button type="button"

οnclick="document.getElementById('id1').style.color='red'">

点我!</button>

function changetext(id)

{ id.innerHTML="Ooops!";}

</script>

使用 HTML DOM 来分配事件

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>

document.getElementById("myBtn").οnclick=function(){displayDate()};

function displayDate(){

document.getElementById("demo").innerHTML=Date();

}

</script>

onload 和 onunload 事件

function checkCookies(){

if (navigator.cookieEnabled==true){

alert("Cookies 可用")

}

else{

alert("Cookies 不可用")

}

</script></body>

onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 myFunction() 函数。

输入电话号码: <input type="text" id="fname" οnchange="myFunction()">

<p id="alert">这是提示信息！</p>

function myFunction(){

var x=document.getElementById("fname");

var y=document.getElementById("alert");

if(x.value.length<11){

y.innerHTML = "电话号码长度不是11位"

}

</script>

onmouseover 和 onmouseout 事件

<div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>

function mOver(obj){

obj.innerHTML="移进显示"

}

function mOut(obj){

obj.innerHTML="移除显示"

}

</script>

onmousedown、onmouseup 以及 onclick 事件

<p>点击不释放鼠标灯将一直亮着!</p>

function lighton(){

document.getElementById('myimage').src="bulbon.gif";

}

function lightoff(){

document.getElementById('myimage').src="bulboff.gif";

}

</script>

addEventListener() 方法

document.getElementById("myBtn").addEventListener("click", displayDate);

JavaScript HTML DOM EventListener | 菜鸟教程 (runoob.com)

创建新的 HTML 元素 (节点) - appendChild()

<p id="p1">这是一个段落。</p>

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

</div>

var para = document.createElement("p");

var node = document.createTextNode("这是一个新的段落。");

para.appendChild(node);

var element = document.getElementById("div1");

element.appendChild(para);

</script>

实例解析

以下代码是用于创建 <p> 元素:

var para = document.createElement("p");

为 <p> 元素创建一个新的文本节点：

var node = document.createTextNode("这是一个新的段落。");

将文本节点添加到 <p> 元素中：

para.appendChild(node);

最后，在一个已存在的元素中添加 p 元素。

查找已存在的元素：

var element = document.getElementById("div1");

添加到已存在的元素中:

element.appendChild(para);

创建新的 HTML 元素 (节点) - insertBefore()

以上的实例我们使用了 appendChild() 方法，它用于添加新元素到尾部。

如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法:

<p id="p1">这是一个段落。</p>

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

</div>

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>

移除已存在的元素

要移除一个元素，你需要知道该元素的父元素。

<p id="p1">这是一个段落。</p>

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

</div>

var parent = document.getElementById("div1");

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

parent.removeChild(child);

</script>

如果能够在不引用父元素的情况下删除某个元素，就太好了。

不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。

以下代码是已知要查找的子元素，然后查找其父元素，再删除这个子元素（删除节点必须知道父节点）：

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

child.parentNode.removeChild(child);

替换 HTML 元素 - replaceChild()

<p id="p1">这是一个段落。</p>

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

</div>

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>

JavaScript HTML DOM 集合(Collection)

HTMLCollection 对象

getElementsByTagName() 方法返回 HTMLCollection 对象。

HTMLCollection 对象类似包含 HTML 元素的一个数组。

以下代码获取文档所有的 <p> 元素：

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

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

document.getElementById("demo").innerHTML = "第二个段落的内容为:<span style='color:red;'> " + myCollection[1].innerHTML + '</span>';

</script>

HTMLCollection 对象 length 属性

HTMLCollection 对象的 length 属性定义了集合中元素的数量。

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

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

document.getElementById("demo").innerHTML = "文档包含" + myCollection.length + " 个段落。";

</script>

集合 length 属性常用于遍历集合中的元素。

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p>点击按钮修改 p 元素的背景颜色。</p>

function myFunction() {

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

var i;

for (i = 0; i < myCollection.length; i++) {

myCollection[i].style.color = "red";

}

</script>

注意

HTMLCollection 不是一个数组！

HTMLCollection 看起来可能是一个数组，但其实不是。

你可以像数组一样，使用索引来获取元素。

HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

JavaScript HTML DOM 节点列表

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

NodeList 对象类似 HTMLCollection 对象。

一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。

所有浏览器的 childNodes 属性返回的是 NodeList 对象。

大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

var myNodelist = document.querySelectorAll("p");

document.getElementById("demo").innerHTML = "第二个段落的内容为:<span style='color:red;'> " + myNodelist[1].innerHTML + '</span>';

</script>

NodeList 对象 length 属性

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

var myNodelist = document.querySelectorAll("p");

document.getElementById("demo").innerHTML = "文档包含 " + myNodelist.length + " 个段落。";

</script>

length 属性常用于遍历节点列表。

<h2>JavaScript HTML DOM!</h2>

<p>Hello World!</p>

<p>Hello Runoob!</p>

<p>点击按钮修改所有 p 元素的背景颜色。</p>

function myFunction() {

var myNodelist = document.querySelectorAll("p");

var i;

for (i = 0; i < myNodelist.length; i++) {

myNodelist[i].style.color = "red";

}

</script>

HTMLCollection 与 NodeList 的区别

HTMLCollection 是 HTML 元素的集合。

NodeList 是一个文档节点的集合。

NodeList 与 HTMLCollection 有很多类似的地方。

NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。

NodeList 与 HTMLCollection 都有 length 属性。

HTMLCollection 元素可以通过 name，id 或索引来获取。

NodeList 只能通过索引来获取。

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

节点列表不是一个数组！

节点列表看起来可能是一个数组，但其实不是。

你可以像数组一样，使用索引来获取元素。

节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

程序猿online

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML Javascript DOM 学习笔记

JavascriptDOM简单笔记
复制链接

扫一扫

专栏目录

HTML Javascript DOM 学习笔记

JavaScript 能做什么

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

查找 HTML元素

通过 id 找到 HTML 元素

通过标签名找到 HTML 元素

通过类名找到 HTML 元素

改变HTML 输出流

改变 HTML 内容

改变 HTML 属性

改变 HTML 样式

使用事件

使用 HTML DOM 来分配事件

onload 和 onunload 事件

onchange 事件

onmouseover 和 onmouseout 事件

onmousedown、onmouseup 以及 onclick 事件

addEventListener() 方法

创建新的 HTML 元素 (节点) - appendChild()

实例解析

创建新的 HTML 元素 (节点) - insertBefore()

移除已存在的元素

替换 HTML 元素 - replaceChild()

JavaScript HTML DOM 集合(Collection)

HTMLCollection 对象

HTMLCollection 对象 length 属性

注意

JavaScript HTML DOM 节点列表

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

NodeList 对象 length 属性

HTMLCollection 与 NodeList 的区别