DOM小解

2022-08-08 13:38:03

现在来说说DOM

文档对象模型DOM（Document Object Model）定义访问和处理html文档的标准方法。DOM将html文档呈现为带有元素

，属性和文本的树结构（节点树）

先来看看下列代码

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<h2><a href="http://www.baidu.com">javascript DOM</a></h2>

<p>对HTML元素进行操作，可添加，改变或移除CSS样式等</p>

<ul>

<li>JavaScript</li>

</ul>

</body>

</html>

html文档可以说由节点构成的集合，三种常见的DOM节点：

1.元素节点:如<html>、<body>、<p>等都是元素节点，即标签。

2.文本节点:向用户展示的内容，如<li>...</li>种的JavaScript、DOM、CSS等文本

3.属性节点:元素属性，如<a>标签的链接属性href="http://www.baidu.com"

看下面的代码：

<a href="http://www.baidu.com">JavaScript DOM</a>

这里面href="http://www.baidu.com"是属性节点 JavaScript DOM是文本节点

首先，通过ID获取元素

学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号

一样，只要通过身份证号就可以找到相对应的人，那么在网页中我们通过id先找到标签，然后进行操作。

语法：

document.getElementById("id")

今天晚上暂时更新到这里。。明天我继续更新。。。。。。

接上面的。下面继续：

下面来看看代码：

<!DOCTYPE HTML>

<html>

<head>

var mye=document.getElementById("con");//获取元素存储在变量mye中

document.write(mye);//输出变量mye

</script>

</head>

<body>

<h3>Hello</h3>

<p id="con">I Love JavaScript</p>

</body>

</html>

结果：null或者[object HTMLParagraphElement]

注意：获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。

innerHTML属性用于获取或替换HTML元素的内容

语法：

Object.innerHTML

注意：

1.Object是获取的元素对象，如通过document.getElementById（"ID"）获取的元素

2.注意书写，innerHTML区分大小写

我们通过id="con"获取<p>元素，并将元素的内容输出和改变元素内容，如下：

<!DOCTYPE HTML>

<html>

<head>

<title>innerHTML</title>

</head>

<body>

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

var mycon=document.getElementById("con");

document.write("p标签原始内容："+mycon.innerHTML+"<br>");

//输入元素内容

mycon.innerHTML="New text!"//修改p元素内容

document.write("p标签修改后的内容为："+mycon.innerHTML);

</script>

</body>

</html>

注意！！！看清楚，这里的innerTHML是可以获取！还有！替换！的！既可以获取，

又可以替换！懂了没有！不要再询问为什么前面也可以得到原始内容！看清楚！

然后HTML DOM允许JavaScript改变HTML元素的样式，如何改变HTML元素的样式呢？

语法：

Object.style.property=new style;

注意：Object是获取的元素对象，如通过document.getElementById("id")获取的

元素。

属性表如下：

属性描述

backgroundColor 设置元素背景色

height 设置元素高度

width 设置元素宽度

color 设置文本的颜色

font 在一行设置所有的字体属性

fontFamily 设置元素的字体系列

fontSize 设置元素的字体大小

注意：这个表只是一小部分的css样式属性，其他的样式也可以通过该方法设置和

修改。

看看下面代码：

改变<p>元素的样式，将颜色改为红色，字号改为20，背景色改为蓝色：

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

var kk=document.getElementById("pcon");

kk.style.color="red";

kk.style.fontSize="20";

kk.style.backgroundColor="blue";

</script>

网页中擦很难过常会看到显示和隐藏的效果，可以通过display属性来设置

语法：

Object.style.display=value

注意：Object是获取的元素对象，如通过document.getElementById("id")获取的

元素。

value取值：

值描述

none 此元素不会被显示（即隐藏）

block 此元素将显示为块级元素（即显示）

看下面代码：

<!DOCTYPE THML>

<html>

<head>

<title>display</title>

function hidetext()

{

document.getElementById("con").style.display="none";

}

function showtext()

{

document.getElementById("con").style.display="block";

}

</script>

</head>

<body>

<h1>JavaScript</h1>

作为一个web开发者来说，如果你想提供漂亮的网页，令客户满意的上网体验，JavaScript

是必不可少的工具。</p>

<form>

</body>

</html>

接下来说一说控制类名（className属性）

className属性设置或返回元素的class属性。

语法：

Object.className=classname

作用：

1.获取元素的class属性

2.为网页内的某个元素指定一个css样式来更改该元素的外观

看看下面的代码，获得<p>元素的class属性和改变className：

<!DOCTYPE HTML>

<html>

<head>

<title>className属性</title>

input{font-size:10px;}

.one{

width:200px;

background-color:#ccc;

}

.two{

font-size:18px;

color:#FOO;

}

</style>

</head>

<body>

<p id="con" class="one">JavaScript</p>

<form>

</form>

var mychar=document.getElementById("con");

document.write("p元素Class值为："+mychar.className+"</br>");

//输出p元素Class属性

function modifyclass(){

mychar.className="two";//改变className

}

</script>

</body>

</html>

这里注意！这个地方的className还有前面提到的getElementById等等都必须严格

遵循驼峰法，否则将不起作用。

DOM小解

码农公寓

相关文章