javascript 之DOM篇

深藏阁楼爱情的钟 2022-09-24 10:19 144阅读 0赞

DOM简介：

1、HTML DOM（网页对象模型）:当网页被加载时，浏览器会创建页面的文档对象模型。

HTML DOM 模型被构造为对象的树。

HTML DOM树：

![911297-20160728154114325-1112351129.gif][]

（ps:这个东东好像有点难懂也不知道是干嘛的？就是DOM的一个结构啥的吧，蛮看吧，后面我的学习好像没有涉及这个可怕的深奥定义，以后用到了，我再做提醒嘎。）

\--------------------------------------------------------------------------------------------------------------------------

DOM操作HTML

1.改变html的输出流；（！注意：一定不要再整个文档加载完成之后使用document.write(),否则会覆盖该文档！！！！）

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例（针对1）：(1)<script> document.write("hello");</script>

结果：界面打印出hello

(2)<p>hello</p>

结果：界面打印出hello

world（因为p是段落标签，所以world换行）。

(3)<p>hello</p>

function  demo()\{

document.write("world");

</script>

结果：界面打印出hello

一个按钮标志

当鼠标点击按钮是，界面出现覆盖现象，变为打印出world。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

2.寻找元素：（1）通过id找到html元素；       （2）通过标签名找到html元素；

3.改变html内容：使用属性innerHTML

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例（针对2,3）：

<p id="pid">hello</p>

function demo()\{

var nv=document.getElementById("demo");

nv.innnerHTML="world";

</script>

结果：界面打印出hello

按钮标志

当鼠标点击按钮是，hello变为world。

（ps:通过标签寻找即是用document.getElementByTagName("标签名")）。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

4.改变HTML属性：使用属性attribute.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例(针对4):

<a id="aid" href="http://www.cnblogs.com/yanyuanyuan/”>烽火戏诸诸诸候</a>

function demo()\{

document.getElementById("aid").href="http://www:baidu.com";

</script>

结果：界面出现链接字样：烽火戏诸诸诸候，点击不是跳转到http://www.cnblogs.com/yanyuanyuan/，而是跳转到http://www.baidu.com。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\`\`

\---------------------------------------------------------------------------------

DOM操作CSS

1.通过DOM对象改变CSS

语法：document.getElementById(id).style.property=new style.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例：<style>

.div\{

width:100px;

heigth:100px;

background:red;

</style>

<body>

<div id="div" class="div">hello</div>

function demo()\{

document.getElementById("div").style.background="blue";

</script>

</body>

结果：界面打印出宽100px,高100px的红色背景框，里面有hello字样

一个按钮

当鼠标点击按钮时，背景色变为蓝色。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

————————————————————————————————————--------------------

1.DOM EventListener

方法：（1）addEventListener():方法用于向指定元素添加事件句柄。

（2）removeEventListener():移出方法添加的事件句柄。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

例：<button id="btn">按钮</button>

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

x.addEventListener("click",hello);

x.addEventListener("click",world);

function hello()\{

alert("hello");

function world()\{

alert("world");

</script>

结果：界面弹出提示框“hello”,点击确定继续弹出提示框“world”.

（ps:removeEventListener()是对事件的移除，即上述例子，则就在add......后就一语句:x.removeEventListener("click",hello)，则不会弹出提示框hello）

[911297-20160728154114325-1112351129.gif]: /images/20220719/c3524dab5a0043f8b991e677518197d3.png

javascript 之DOM篇

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 JavaScript核心之 DOM BOM

相关 JavaScript（三）——DOM操作之如何创建DOM对象

相关 javascript 之DOM篇

相关 JavaScript之DOM

相关 JavaScript之浅谈DOM操作（了解DOM）

相关 JavaScript复习之JavaScript 操作 DOM 节点

相关 JavaScript DOM操作提高篇

相关 JavaScript基础之Dom对象

相关 JavaScript dom基础篇之标签选择器

相关 JavaScript dom基础篇之点击换色