南大软院大神养成计划第十六天

jx370

于 2015-12-01 13:29:37 发布

阅读量295

点赞数

本文链接：https://blog.csdn.net/jx370/article/details/50128269

版权

今天来看Dom模型的一部分方法

Dom模型将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。在<script>的标签里，和CSS一样，是为html文本添加样式的。

首先看一个CSS里没有的隐藏属性。在body里共有两个标题，我为他们添加了同样的样式，然后为第一个标题添加了隐藏属性，在结果中可以看到第一标题连同样式都被隐藏了，第二个标题和它的样式都还在

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>style样式</title>

</head>
<body>

<h1 id="con">I love JavaScript</H1>
<h2 id="dom">biubiubiubiubiu</h2>
<p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>

var mys = document.getElementById("con");//取值
mys.style.color="red";//字体颜色
mys.style.backgroundColor="#ccc";//背景颜色
mys.style.display="none";//隐藏

var my=document.getElementById("dom");
my.style.color="red";//设置一样的字体颜色
my.style.backgroundColor="#ccc";//一样的背景颜色，不设隐藏

</script>

</body>
</html>

其次，再来看看几个和name有关的方法。

1，getElementsByName()方法，返回带有指定名称的节点对象的集合。结果会返回一个数组，我这里写了四个链接属性，点击按钮后返回的就是数字“4”。因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

2，getElementsByTagName()方法，返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。

下面是一个使用了这两个方法的简单代码，也体现了name属性的不唯一

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<script type="text/javascript">
function getnum(){

var mynode=document.getElementsByName("myt");

alert(mynode.length);
}

function getTagElements(){
var myI = document.getElementsByTagName("input");
alert(myI.length);
}

</script>

<body>

<br>

</body>
</html>

结果输出----------

document.getElementsByName("myt")，结果为获取属性name="myt"的元素，共4个。

document.getElementsByTagName("input")，结果为获取所有标签为input的元素，共2个。

最后，一定要注意代码的书写，我就总是错在一些细节上，运行时就发现不能运行，找起错误来也会比较麻烦。

jx370

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
南大软院大神养成计划第十六天

今天来看Dom模型Dom模型将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。在的标签里，和CSS一样，是为html文本添加样式的。首先看一个CSS里没有的隐藏属性。在body里共有两个标题，我为他们添加了同样的样式，然后为第一个标题添加了隐藏属性，在结果中可以看到第一标题连同样式都被隐藏了，第二个标题和它的样式都还在
复制链接

扫一扫