《Javascript DOM的编程艺术》学习三

最新推荐文章于 2022-04-14 13:45:14 发布

GISMagic

最新推荐文章于 2022-04-14 13:45:14 发布

阅读量286

点赞数 1

分类专栏： JavaScript 文章标签： dom

本文链接：https://blog.csdn.net/Tonque/article/details/88802316

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是DOM

Document Object Model文档对象文字的首字母缩写。

1.D

在你创建了一个网页并把它加载到web上时，DOM就会根据你编写的网页文档创建一个文档对象。

2.O

就是object,就是一种独立的数据集合，其中可以分为三种模型：
1.用户定义对象：程序员自行创建的对象。
2.内建对象：在JS语言中的对象，如Array、Math、Data等。
3.宿主对象：有浏览器提供的对象。
在JS语言发展初期，在编写脚本时会经常用到一些非常重要的宿主对象，最基础的就是windos对象。
它对应着浏览器窗口本身，对象属性和方法通常被统称为BOM浏览器对象模型。它提供window.open 和window.blur等方法，例如上网时遇见的弹窗，下拉菜单等功能时。

3.M

模型。浏览器向我们提供了模型，我们用JS取读取它。

<!DOCTYPE>
<html>
<meta charset="utf-8">
<title>购物清单</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>Chesse</li>
<li>Milk</li>
</ul>
</body>
</html>

根据上述代码我们可以了解各个元素之间的关系,

在我花了一百年画出来这个关系图之后,是不是更加清晰明了了呢?

4.节点

节点就是交通枢纽那样,单条的道路通过枢纽链接在一起,最终可以构成庞大的交通网.网络也如此,DOM中也存在这许多不同类型的节点。
其中上面的树状图例如body就是元素节点，如果元素中包含文本就是文本节点，而属性节点就是在title元素中。

5.CSS层叠样式表

它决定了网页的样式，其作用和DOM一样，一般对样式的声明是在head中，用style样式表达出来，也可以放在另一个样式表文件里。
CSS也具有同DOM一样逻辑思维都是以节点树各个元素父子关系一样。继承就是它很强大的功能，就是给body元素定义一个颜色或字体时，里面的的所有元素都会继承body中设置的样式。

body{
color：white；
background—color：black；
}

但是在平时我们可能会只想给特定的元素给予标志，所以这个时候我们就可以用到class属性。

<p class="class">This paragraph has the special class</p>
<h2 class="special">So does this headline</h2>

在样式表里，我们可以定义一个共用的样式：

.special{
font-style:italic;
}

我们也可以设置一个特定类型的元素定义一种独享的样式：

h2.special{
text-transform:uppercase;
}

id属性：它的作用是给网页中某个元素加上独一无二的标识符：

<ul id="purchase">

在样式表中，我们可以给特定的元素定义一个独享的样式，就是有特定的id，用id来定义。

#purchases{
border:10px solid rgb(228, 79, 79);
background-color:rgb(69, 124, 226);
color:#ccc;
padding:1em;}
}

3.getElementByld()方法

getElementByld是返回一个与那个有着给定id属性值的元素节点对应对象的方法。（

这句话我也不怎么懂，可能翻译都哭了说的这是啥玩意儿）他是对象document的一个函数，函数之后应该要有圆括号，里面是参数。所以格式就是：

document.getElementByld(id);

根据上述代码，我们可以写出一个警告的脚本：

<script type="text/javascript">
alert(typeof document.getElementByld("purchases"));
</script>

将这段代码放在body中，运行之后便可以看见对于purchases这个东西的描述。

5.getElementByTagName()方法

这个方法将返回一个对象数组，每个对象分辨二对应着文档里有着给定标签的一个元素。所以这个的运用次数会比getElementByld()多。例子：

<script type="text/javascript">
var items = document.getElementsByTagName("li");
for (var i=0;i < items.length;i++){   
 alert(typeof items[i]);
 }
 </script>

这个运行之后会出现三个警告，是因为我的ul里有三个li，而它读取的是items的属性，也就是object，综上出来的应该是三次object的警告了。

6.getAttribute()方法

这个方法是为了检测出元素中的值，但是只能翻译单一元素的值。如果一个元素中有大于一个的元素数量，用alert返回的话就是null，因为他不知道你要返回什么。但是我们可以增加一个提醒if语句。

var paras = document.getElementsByTagName("p");
for (var = i;i < paras.length;i++){
var titile_text = paras[i].getattribute("title");
if(title_text != null){
alert(title_text);
  }
}

把这个放在购物i清单的底下运行，就会出现一个alert : a gentle reminder。

7.setAttrtibute()方法

我们从get和set中可以看出区别了，get只可以从元素中检索信息，而set就可以对属性节点的值做出修改。但是Attribute都是只能通过元素节点对象调用的函数，setAttribute ()方法需要我们传递两个参数：object.setAttribute(attribute,value):

var paras = document.getElementsByTagName("p");
for (var i=0;i < paras.length;i++){
var titile_text = paras[i].getAttribute("title");
if(title_text){
paras[i].setAttrtibute("title","brand new title text");
alert(paras[i].getAttribute("titile"));
  }
}