Javascript DOM使用知识

最新推荐文章于 2020-11-28 11:08:36 发布

运维个西瓜

最新推荐文章于 2020-11-28 11:08:36 发布

阅读量659

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/watermelonbig/article/details/78421354

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

DOM，Document-Object-Map(Model)

DOM的工作模式，先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。即对页面内容进行刷新却不需要在浏览器里刷新页面。

1、js中有三种对象

用户自定义对象
内建对象，如Array,Date等
宿主对象，由浏览器提供的对象

2、DOM中最主要的三种节点类型

元素节点，主查页面标签
文本节点，即标签包括起来的文本内容
属性节点，总是会被包含在元素节点之中

3、3种获取指定元素节点的DOM方法

getElementById，如document.getElementById("purchases")，该调用返回一个元素对象。
getElementByTagName，返回一个对象数组，支持使用一个通配符作为参数查找所有的元素。

var shopping = document.getElementById("purchases");
var items = shopping.getElementByTagName("*");

getElementByClassName

var shopping = document.getElementById("purchases");
var sales = shopping.getElementByClassName("sale");

4、其他知识点

一份文档就是一棵节点树
节点分为不同的类型：元素节点、属性节点和文本节点等
getElementById将返回一个对象，该对象对应着文档里的一个特定的元素节点
getElementByTagName和getElementByClassName将返回一个对象数组，它们分别对应着文档里的一组特定的元素节点
每个节点都是一个对象

5、获取和设置属性

object.getAttribute(attribute)
object.setAttribute(attribute)
var paras = document.getElementsByTagName("p");
for (var i=0; i<paras.length;i++) {
  var title_text = paras[i].getAttribute("title");
  if (title_text) alert(title_text);
}注：上面代码中的if语句使用了两个小技巧，以使得代码更加简明。

6、使用DOM知识编写一个图片库

本部分的三个主要内容是：

学习使用DOM所提供的方法去编写图片库脚本；
学习利用事件处理函数把js代码和网页集成在一起；
初步认识CSS；

事件处理函数：在特定事件发生时调用特定的JavaScript代码。

语法如下：

event = "JavaScript satement(s)" --可以把任意数量的JavaScript语句放在这对引号之间，只要把各条语句用分号隔开即可。

怎么样阻止在点击链接后离开当前页面的默认行为？

方法是在js函数后添加一个方法的返回值，让事件处理函数认为“这个链接没有被点击”。这样就可以防止用户被带到目标链接窗口。

onclick = "showPic(this); return false;"

怎么使用ChildNodes属性

在一棵节点树上，childNodes属性可以用来获取任何一个元素的所有子元素，这是一个包含全部子元素的数组。

例如，获取body元素的全体子元素：

var body_element = document.getElementByTagName("body")[0];

body_element.childNodes;

body_element.childNodes.length; --获取数组元素数量

nodeType属性类型

由childNodes返回的数组包含所有类型的节点，而不仅仅是元素节点。内容中的空格和换行符也会被解释为节点。

因此，需要掌握nodeType的使用：

node.nodeType;

nodeType属性共有12种可取值，但最常用的只有以下3种：

元素节点的nodeType属性值是1；
属性节点的nodeType属性值是2；
文本节点的nodeType属性值是3；

占位符的使用：我们需要在当前页面显示自己的图片库，就需要预先设置好一个标记文件起“占位置”的作用。

<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" /> --一个图片占位符

Choose an image. --一个文本占位符

nodeValue属性

如果想改变一个文本节点的值，就需要使用nodeValue属性，它可以用来得到或设置一个节点的值。

怎么获取元素里的文本？

description.nodeValue --这只会返回一个null值，因为返回的是元素本身的nodeValue

description.childNodes[0].nodeValue --这样才能正确得到文本内容，原因是包含在元素里的文本是另一种节点，它是元素的第一个子节点。

firstChild属性和lastChild属性

childNodes数组的第一个元素可以写成firstChild:

node.firstChild;

等同于

node.childNodes[0];

node.lastChild;

等同于

node.childNodes[node.childNodes.length-1];

因此元素中文本内容值可以表示为以下：

description.firstChild.nodeValue;

本部分使用到的代码样例：

gallery.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Image Gallery</title>
	<link rel="stylesheet" href="styles/layout.css" media="screen" />
</head>
<body>
	<h1>Snapshots</h1>
	<ul>
		<li><a href="images/fireworks.jpg" οnclick="showPic(this); return false;" title="A fireworks display">Fireworks</a></li>
		<li><a href="images/coffee.jpg" οnclick="showPic(this); return false;" title="A cup of back coffee">Coffee</a></li>
		<li><a href="images/rose.jpg" οnclick="showPic(this); return false;" title="A red,red rose">Rose</a></li>
		<li><a href="images/bigben.jpg" οnclick="showPic(this); return false;" title="A famous clock">Big Ben</a></li>
	</ul>
	<img id="placeholder" src="images/placeholder.gif" alt="my image gallery" />
	<p id="description">Choose an image.</p>
	<script type="text/javascript" src="scripts/showPic.js"></script>
</body>
</html>

showPic.js

function showPic(whichpic) {
	var source = whichpic.getAttribute("href");
	var placeholder = document.getElementById("placeholder");
	placeholder.setAttribute("src",source);
	var text = whichpic.getAttribute("title");
	var description = document.getElementById("description");
	description.firstChild.nodeValue = text;
}

layout.css

body {
	font-family: "Helvetica","Arial",serif;
	color: #333;
	background-color: #ccc;
	margin: 1em 10%;
}
h1 {
	color: #333;
	background-color: transparent;
}
a {
	color: #c60;
	background-color: transparent;
	font-weight: bold;
	text-decoration: none;
}
ul {
	padding: 0;
}
li {
	fload: left;
	padding: 1em;
	list-style: none;
}
img {
	display:block;
	clear:both;
}

7、DOM Core和HTML-DOM

像以下几个方法都是DOM Core的组成部分：

getElementById
getElementByTagName
getAttribute
setAttribute

这些方法并不专属于javascript，任一种支持DOM的语言都可以使用它们，如XML。

HTML-DOM提供了一个forms对象，这个对象允许把下面这样的语句：

document.getElementsByTagName("form")

简化为：

document.form

又如：

element.getAttribute("src") --> element.src

var source = whichpic.getAttribute("href") --> var source = whichpic.href

placeholder.setAttribute("src",source) ---> placeholder.src = source

运维个西瓜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Javascript DOM使用知识

DOM，Document-Object-Map(Model)DOM的工作模式，先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容。即对页面内容进行刷新却不需要在浏览器里刷新页面。1、js中有三种对象用户自定义对象内建对象，如Array,Date等宿主对象，由浏览器提供的对象2、DOM中最主要的三种节点类型是元素节点，主查页面标签文本节点，即标签包
复制链接

扫一扫