web前端之JavaScript DOM编程艺术之DOM

最新推荐文章于 2018-09-29 18:50:39 发布

爸爸去哪了2之熊猫三胞胎

最新推荐文章于 2018-09-29 18:50:39 发布

阅读量489

点赞数 1

分类专栏： web前端 JavaScript JavaScript DOM编程艺术文章标签： javascript web前端 dom

本文链接：https://blog.csdn.net/u014785563/article/details/53290728

版权

web前端同时被 3 个专栏收录

99 篇文章 1 订阅

订阅专栏

JavaScript

86 篇文章 0 订阅

订阅专栏

JavaScript DOM编程艺术

10 篇文章 0 订阅

订阅专栏

web前端之JavaScript DOM编程艺术之DOM

5个常用DOM方法:getElementById,getElementsByTagName,getElementsByClassName,getAttribute和setAttribute
文档:DOM中的”D”:
如果没有document(文档),DOM无从谈起。
对象:DOM中的”O”:
用户定义对象(user-defined object):有程序员自行创建的对象
内建对象(native object):内建在JavaScript语言里的对象,如Array、Math、Date等
宿主对象(host object):由浏览器提供的对象,如window
模型:DOM中的”M”:
DOM代表着加载到浏览器窗口的当前网页,浏览器提供了网页的模型,我们就通过JavaScript去读取这个模型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Shopping list</title>
</head>
<body>
    <h1>What to buy</h1>
    <p title="a gentle reminder">Don't forget to buy this stuff.</p>
    <ul id="purchases">
        <li>A tin of beans</li>
        <li class="sale">Cheese</li>
        <li class="sale important">Milk</li>
    </ul>
</body>
</html>

html:为整个程序的根目录
head,body:为整个程序的子目录
……
综上,html文档可以看成”节点树”

节点:

元素节点:
html、p、ul等都属于元素节点
文本节点:

<p>这中间的文字就是文本节点</p>

属性节点:

<p title="reminder">这中间的文字就是文本节点</p>

title=”reminder”就是p的属性节点
CSS:
CSS(层叠样式表)告诉浏览器应该如何显示一份文档的内容,也是一种节点

获取元素:
getElementById:
document.getElementById(‘purchases’);用这个就可以调用id名为purchases的元素

getElementsByTagName:
getElementsByTagName方法返回一个对象数组,每个对象数组分别对应着文档里有着给定标签的一个元素,类似于getElementById
document.getElementsByTagName(‘li’);
这个调用li的对象数组

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

getElementsByClassName: HTML5 DOM新增的方法.这个方法可以通过class属性中的类名来访问元素.
document.getElementsByClassName(“sale”);来获取那些带有多个类名的元素。

获取和设置属性：
getAttribute：
getAttribute不属于document,所以不能通过document来进行调用,只能通过元素节点对象调用.例如,可以与getElementsByTagName方法合用:

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

setAttribute：
setAttribute方法允许我们对属性节点的值作出修改。与getAttribute一样,setAttribute也只能用于元素节点对象.
object.setAttribute(attribute,value);

var shopping=document.getElementsByTagName('p');
shopping.setAttribute("title","this is a good job");

注:setAttribute只能改变显示状态,却改变不了内在状态

爸爸去哪了2之熊猫三胞胎

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端之JavaScript DOM编程艺术之DOM

web前端之JavaScript DOM编程艺术之DOM5个常用DOM方法:getElementById,getElementsByTagName,getElementsByClassName,getAttribute和setAttribute 文档:DOM中的”D”: 如果没有document(文档),DOM无从谈起。对象:DOM中的”O”: 用户定义对象(user-defined ob
复制链接

扫一扫