JavaScript进击之路（1）

最新推荐文章于 2019-05-23 22:14:00 发布

爵_J

最新推荐文章于 2019-05-23 22:14:00 发布

阅读量438

点赞数

本文链接：https://blog.csdn.net/baidu_34210678/article/details/72910328

版权

一、DOM学习

1.5个常用的DOM方法（getElementById、getElementsByTagName、getElementsByClassName、getAttribute、setAttribute）

2.D为document（文档）；O为object（对象）划分3种分别包含用户自行定义的对象、内建对象如Array,Math等、宿主对象由浏览器提供的对象；M为model（模型）

3.DOM可以抽象的理解为一棵树，用parent（父）、child（子）、sibling（兄弟）来描述各个元素节点之间的关系。

4.节点（node）包含元素节点（element node）如<body>、<li>等元素、文本节点（被包含在元素节点之内）、属性节点（对元素做出更加详细的描述）如title的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>buy Something</title>
</head>
<body>
<h1>What to buy</h1>
<p title = "topic" id = "nodelem"> Don't forget to buy this stuff</p>
<ul id = "buySomeThing">
<li>book</li>
<li class = "sale">food</li>
<li  class = "sale">dog</li>
</ul>
</body>
</html>

获取元素3个方法：

1.getElementById 获取并返回一个与给定id属性的元素节点对象

document.getElementById("buySomething");

2.getElementsByTagName 返回一个对象数组，每个对象对应文档中给定标签的一个元素

document.getElementsByTagName("li");

可以通过for循环获取每个元素的对象

var element = document.getElementsByTagName("li");
for(var i=0;i<element.length;i++){
alert(element.[i]);
}

还可以通过通配符获取该文档中所有的元素（获取当前文档中的所有元素对象）

alert(document.getElementsByTagName("*").length);

3.getElementsByClassName 返回相同类名元素的数组

document.getElementsByCalssName("sale");

获取和设置属性
1.getAttribute 获取元素对象的属性

var element = document.getElementsByTagName("p");
for(var k = 0;k<element.length;k++){
alert(element[k].getAttribute("title"));
}

如果该元素没有这个属性则返回为null
2.setAttribute 对元素节点的属性做修改
将上例中的title属性topic 修改为onepiece

var element = document.getElementsByTagName("p");
for(var k = 0;k<element.length;k++){
element[k].setAttribute("title","onepiece");
alert(element[k].getAttribute("title"));
}

扩展DOM属性

1.childNodes可以获取任何一个元素的所有子元素

var bodychild = document.getElementsByTagName("body").[0];
alert(bodychild.childNodes.length);

2.nodeType 返回节点属性值
*元素节点的nodeType的属性值为1；
*文本节点的nodeType的属性值为2；
*属性节点的nodeType的属性值为3；
3.nodeValue获得/设置文本节点的内容

var nodelem = document.getElementById("nodelem");
alert(nodelem.nodeValue);

返回的是null，因为该节点为元素节点，他的子节点为文本节点，故：

alert(nodelem.childNodes[0].nodeValue);

这样就返回为该文本节点的内容
修改文本节点的文本内容则如：

nodelem.childNodes[0].nodeValue = "Buy some storybooks";

爵_J

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫