DOM笔记

最新推荐文章于 2022-08-26 19:13:18 发布

hepothetically

最新推荐文章于 2022-08-26 19:13:18 发布

阅读量193

点赞数

本文链接：https://blog.csdn.net/hepothetically/article/details/81535405

版权

概念：

DOM（document object model）即文档对象模型

HTML DOM是：HTML的标准对象模型、HTML的标准编程接口、W3C标准

html dom定义了所有HTML元素的对象和属性，以及访问他们的方法，换言之，HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准。

节点：

在HTML DOM中，所有事物都是节点。DOM是被视为节点树的HTML

通过HTML DOM，树中的所有节点均可以通过Javascript进行访问。所有HTML元素均可以被修改，也可以创建和删除节点

注意：<p>hello world!</p>中，元素节点<p>包含值为“hello world”的文本节点。可通过节点的innerHTML属性来访问文本节点的值。

方法：

即我们可以在节点（HTML元素）上执行的动作

所有HTML元素被定义为对象，而编程接口则是对象方法和对象属性。

getElementById()方法：返回带有指定ID的元素

代码示例：

<!DOCTYPE html>

<html>

<body>

<p id="intro">Hello world!</p>

<p>本例演示<b>getElementById</b>方法</p>

x=document.getElementById("intro");

document.write("<p>来自intro段落的文本："+x.innerHTML+"</p>");

</script>

</body>

</html>

一些DOM对象方法

getElementById()：返回带有指定ID的元素

getElementByTagName()：返回包含带有指定标签名称的所有元素的节点（集合/节点数组。）

getElementByClassName()：返回包含带有指定类名的所有元素的节点列表。

appendChild():把新的子节点添加到指定节点

removeChild():删除子节点

insertBefore():在指定的子节点前面插入新的子节点

createAttribute():创建属性节点

createElement():创建元素节点

createTextNode():创建文本节点

getAtrribute():返回指定的属性值

setAttribute():把指定属性设置或修改为指定的值

属性：

属性是节点的值，能够获取或设置

document.getElementById("intro").innerHTML中innerHTML是属性

通过inner HTML可获取或改变任意的HTML元素，包括<html>和<body>

nodeName属性：规定节点的名称，且只读

元素节点的nodeName与标签名相同
属性节点的nodeName与属性名相同
文本节点的nodeName始终是#text
文档节点的nodeName始终是#document

nodeValue属性：规定节点的值

元素节点的nodeValue是undefined或null
文本节点的nodeValue是文本本身
属性节点的nodeValue是属性值

nodeType属性：返回节点的类型，且只读

HTML DOM属性：

属性是节点（HTML元素）的值，能够获取或设置

所有HTML元素被定义为对象，而编程接口则是对象方法和对象属性

方法是您能够执行的动作（比如添加或修改元素）

属性是你能够获取或设置的值（比如节点的名称或内容）

DOM修改HTML内容：

HTML DOM -元素（添加、删除和替换HTML元素）：

【1、创建一个新元素createElement()

2、为新元素添加内容若是文本节点则用createTextNode()方法

3、使用appendChild()方法实现将子元素添加到父元素当中

4、获取父元素

5、对新添加的元素或已有的元素进行各种操作】

创建新的HTML元素 -appendChild():

添加HTML新元素时，应该首先创建该元素，然后把它追加到已有的元素上

创建新的HTML元素 -insertBefore()

即将新的元素添加到所属父元素的子元素的任意一个地方

insertBefore(para,child);

把para放在child之前

删除已有的HTML元素（removeChild()）

在这之前应该先确定该元素的父元素

替换HTML元素（replaceChild()）

HTML DOM -事件

HTML DOM允许Javascript对HTML事件作出反应

事件属性（如需向HTML元素分配事件，可以使用事件属性）

向button元素分配一个onclick事件

function displayData(){

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

}

</script>

使用HTML DOM来分配事件

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

</script>

名为displayDate的函数被分配给了id=myButn的HTML元素

当按钮被点击时，将执行函数

onload和onunload事件可以用于处理cookies

当用户进入或离开页面时，会触发这两个事件，

onload事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页

onload和onunload事件可用于处理cookies

onchange事件常用于输入字段的验证

当用户改变输入字段的内容时，将调用upperCase()函数【输入框中的内容小写变大写】

onmouseover和onmouseout事件可用于指针移动到或离开元素时触发函数

onmousedown、onmouseup、以及onclick事件。这三个事件是鼠标点击的全过程

当某个鼠标按钮被点击时，会触发onmousedown事件

当鼠标按钮被松开时，会触发onmouseup事件

当鼠标点击完成后，触发onclick事件

hepothetically

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM笔记

概念：DOM（document object model）即文档对象模型HTML DOM是：HTML的标准对象模型、HTML的标准编程接口、W3C标准html dom定义了所有HTML元素的对象和属性，以及访问他们的方法，换言之，HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准。节点：在HTML DOM中，所有事物都是节点。DOM是被视为节点树的HTML通...
复制链接

扫一扫