bootstrap 学习之路 10 (javascript DOM 编程)

最新推荐文章于 2022-03-22 22:40:57 发布

原创最新推荐文章于 2022-03-22 22:40:57 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #DOM #HTML #编程 #JS

bootstrap 专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了HTML DOM的概念，包括DOM的组成、HTML节点的分类及特性，如父节点、子节点、兄妹节点的关系。接着探讨了常用的DOM方法，如getElementById、appendChild等，并讲解了DOM属性，如节点名称、值和类型。此外，还涵盖了DOM在HTML元素操作中的应用，包括修改元素内容和CSS属性，以及创建、删除和替换元素。最后，文章讨论了HTML DOM事件，如鼠标和键盘事件，以及在框架、对象和表单中的事件处理。

1 DOM 简介

1. DOM 包括三部分 core DOM XML DOM HTML DOM(网页编程使用HTML DOM)

2. Html DOM 定义了对象的属性和访问API

3. Javascript操作DOM，实际就是对HTML DOM节点的增删改查 add delete get change

2 HTML 节点

2.1 在W3C协议中everything 都是节点

1. 整个网页时一个document 节点

2. 每一个html 元素就是一个元素节点

3. 内部文本是文本节点

4. Html属性是属性节点

5. 注释是注释节点

2.2 Parents（父节点）、children（子节点）、siblings（兄妹节点）

1. 最顶层节点被称为root

2. 没一个节点都有且只有一个父节点。 Root节点没有父节点

3. 一个节点可以有任意多个子节点

4. 所有的Sibling节点共有一个父节点

2.3 注意：

<title>DOM Tutorial</title> 表示元素节点title包含一个文本节点，文本几点的内容就是DOM Tutorial. 而不是元素节点title包含文本节点。

3 Html DOM methods

方法就是你可以对节点进行的操作。没一个DOM元素都是一个对象，每一个对想都有方法和属性。方法是你可以对节点做什么。属性是节点自身属性，可以进行set和get

3.1 常用方法：

getElementById(id) 获取一个node通过id

getElementsByTagName(sname) 通过名字来获取元素列表

getElementsByClassName(sname) 通过类名来获取元素列表

appendChild(node) 新增一个节点

removeChild(node) 删除一个节点

replaceChild(node) 替换一个节点

insertBefore(node) 在一个节点前面插入一个节点

createAttribute(sname) 创建一个属性节点

createElement(stag) 创建一个元素节点

createTextNode(sname) 创建文本节点

4 HTML DOM属性（propertites）

4.1 节点有三个大的属性：节点名称、节点值、节点属性

4.2 节点名称：

1. 只读的属性

2. 元素节点的节点名称就是tag名称

3. 属性节点的名称就是属性的名称

4. 文本节点的名称是”#text”

5. Document节点的名称是”#document”

4.3 节点值：

1. 元素节点的节点值是null

2. 文本节点的节点值是文本本身

3. 属性节点的节点值是属性内容

e.g.
<!DOCTYPE html>
<html>
<body>
<p id="intro">HelloWorld!</p>
<script>
x=document.getElementById("hello");
document.write(x.nodeValue);
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>

 
输出结果：
Hello World!
nullHello World!

4.4 节点类型：

1 元素节点

2 属性节点

3 文本节点

4 注释节点

5 Document 节点

innerHTML 一个元素节点的文本节点的文本，可以获取和设置

parentNode 元素节点的父节点

childNodes 元素节点的子节点

getAttribute() 返回属性值

setAttribute() 设置属性值

attributes 元素节点的属性节点

5 DOM 应用

5.1 DOM 访问html元素

getElementById(id) 获取一个node通过id

getElementsByTagName(sname)通过名字来获取元素列表

getElementsByClassName(sname)通过类名来获取元素列表

firstChild 第一个子节点

lastChild 最后一个子节点

parentNode 父节点

previousSibling 前一个兄弟节点

nextSibling 后一个兄弟节点

注意：

nextSibling;返回紧接当前节点的后一个节点。会包含元素之间生成的空白文本节点。所以如果判断需要使用循环并判断是否是元素节点。E.g

function nextNode(node){

if(node.type==1 )//元素节点

{

Return node;

}

If(node.nextSibling){

Returnnextnode(node.nextSibling);

}

5.2 修改html DOM 元素

A 改变html 内容

<html>
<body>

<p id="p1">HelloWorld!</p>

<script>
document.getElementById("p1").innerHTML="Newtext!";
</script>

</body>
</html>

B 改变css属性

document.getElementById("p2").style.color="blue";

C 创建新的html元素

<divid="d1">
<p id="p1">This is aparagraph.</p>
<p id="p2">This is anotherparagraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This isnew.");
para.appendChild(node);

varelement=document.getElementById("d1");
element.appendChild(para);
</script>

D 与appendChild 相当的 insertBefore

E 删除元素

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is anotherparagraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

F 替换元素

<div id="div1">
<p id="p1">This is aparagraph.</p>
<p id="p2">This is anotherparagraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This isnew.");
para.appendChild(node);

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

6 HTML DOM 事件

6.1 鼠标事件

onclick 鼠标点击

ondbclick 鼠标双击

onmousedown 点击鼠标

onmouseup 松开鼠标

onmousemove 鼠标移动

onmouseover 鼠标移动过某个元素上

onmouseout 鼠标移除某个元素

6.2 键盘事件

onkeydown 按下键盘

onkeypress 点击键盘

onkeyup 松开键盘

6.3 Frame/对象事件

onabort 当图片加载过程中出错

onerror 当图片没有被加载

onload 页面加载

onresize 页面被改变大小

onscroll 当页面滚动

onunload 当页面没有被加载

6.4 Form 事件

onblur form 中的元素失去焦点

onchange form中元素内容被改变

onfocus 元素获得焦点

onreset form 被重置

onselect 选择文本

onsubmit form 提交

6.5 使用：

语法（以onkeydown为例）：
Html中
<element onkeydown="SomeJavaScriptCode">
Js中
object.onkeydown=function(){SomeJavaScriptCode};
举例：
<inputtype="text" onkeydown="myFunction()">