DOM基本属性笔记

最新推荐文章于 2024-08-26 14:25:48 发布

deargua

最新推荐文章于 2024-08-26 14:25:48 发布

阅读量664

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/deargua/article/details/40516141

版权

javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

DOM对象

DOM对象把当前的网页文档转化为一个文档对象，通过该对象可以实现对该文档的操作。

BOM对象

宿主对象（浏览器提供对象 BOM Browser Ojbect)例如：window

DOM节点分类

<html>
<body class="test1 test2">
这个是文本节点
</body>
</html>

1.元素节点（element node）

html，body，ul，li都称为元素节点（也称为标签，但是通常我们更习惯于把带上尖括号的叫做标签）。
获取元素的方法
1）通过ID获取 document.getElementByI d("idname") 注意这个Id中的d是小写的。javascript区分大小写，写错了也不报错。。！

2) 通过tagname获取，注意这个函数名中是复数，取得的是所有该标签的对象的一个数组。
document.getElementsByTagName("tagname")

3）(HTML5新增)通过className获取，跟tagname类似，取得的是一个数组。
document.getElementsByClassName("classname")
可以同时获取多个类名的标签，用空格隔开，比如body中同时使用了两个类<body class="test1 test2">
则document.getElemmentsByClassName("test1 test2"),这个可以取到即使用test1又使用test2的标签。

2.文本节点（text node）

事例元素包含的文本。不是所有的节点都有文本节点比如ul就没有

文本节点一定是元素节点的子节点，获取文本节点的步骤为：1.获取元素节点 2.利用firstChild获取文本节点，利用nodeValue来访问文本值。

3.属性节点（attribute node）

属性是指元素的属性，例如上例中p元素中的title属性，body中的class属性。用属性节点可以对元素做出更具体的描述。

4.获取元素节点属性，getAttribute函数是object的一个属性，不属于document

这个是文本节点

var para = document.getElementById("test")
para.getAttribute("title") //这个值是代码中title的值“标题党”
//如果标签没有特殊设置title的属性，则默认值为null
if ((document.getElementByID("test").getAttribute("title"))
{
//判断用户设置了title属性后，做一些处理，否则。。
}

5.设置节点属性

这个是文本节点

var para = document.getElementById("test")
para.setAttribute("title", "新的标题哦")

！注意：通过setAttribute设置属性，但是在浏览器查看代码时仍然是旧值

6.setAttribute和getAttribute的类似方法

<img id="img" src="img.jpg">
可以在javascript中直接使用img.src进行读取负值，但是并不是所有的element属性都可以。
所以直接用setAttribute和getAttribute更加通用，切不需要去记忆那些支持哪些不支持。
另外，直接负值的形式移植性不好。

this以及事件处理

在标签中可以添加各种事件，传递参数时this代表当前标签本身。
<a href="" onClick="func(this);func2(this);"></a>
这个this代表a标签，另外，事件后面双引号中可以写N多函数，只需要分号分割即可。
也可以直接在分号中写javascript代码，

<a href="" onClick="return true；"></a>
如果func返回false，则表示事件执行失败，不会响应任何动作，即点击后不会进行链接跳转，如果true则表示事件被执行，则进行跳转。下面的例子可以实现自定义链接动作。注意MyFunc的返回值，与onClick的返回值区别，HTML将整个引号看作是一个函数，MyFunc只是其中一个子函数而已。

<a href="" onClick="MyFunc(this); return false;"></a>

获取子结点 childNods

childNodes可以用来获取任何一个元素的所有子元素，他是所有子元素的数组。假设要把一个页面body的所有子元素取出来，只需要用getElementsByTagName得到body的元素,然后取其子元素即可，因为只有一个body所以，取出的数组只有一个元素，取其第一个元素即可。
var body_element = document.getElement sByTagName("body")[0]; /* 注意通过TagName取得的 Elements函数是复数 */
取出body得全体子元素：body_element.childNodes

nodeType

注意：所谓子节点，不仅包含子元素，事实上文档里几乎所有得东西都是节点，包括空格，换行符号等。这个节点数组只包含子节点，不包含孙节点。那么既然这么多节点，怎么取出我们想要得内容呢，通过nodeType可以判断节点的类型，nodeType总共有12种，但是只有3种对我们有作用
1）元素节点得nodeType 属性值1
2）属性节点得nodeType 属性值 2

3）文本节点得nodeType 属性值 3

下面是 Javascript DOM编程艺术第二版第四章 javascript图片库事例代码

该功能实现了一个图片库的功能，通过return false；来阻止默认的链接跳转行为，然后重写了链接的功能。通过nodeValue将图片中的title动态显示为标题。

<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
    <title>Image Gallery</title>
</head>

<body>
	<h1>Snapshots</h1>
    <ul>
    	<li><a href="img1.jpeg" title="A img1 display" onClick="return showPic(this)">img1</a></li>
        <li><a href="img2.jpeg" title="A img2 display" onClick="return showPic(this)">img2</a></li>
        <li><a href="img3.jpeg" title="A img3 display" onClick="return showPic(this);">img3</a></li>
    </ul>
    <input type="button" value="btn" onClick="countBodyChildren();">
    <p id="desc"> choose an image.</p>
    <img id="placeholder" src="img2.jpeg" alt="my image">
  	
    <script type="text/javascript" src="javascript.js"></script>
</body>
</html>

javascript

// JavaScript Document
function showPic(whichpic)
{
	var source = whichpic.getAttribute("href");
	var title = whichpic.getAttribute("title");
	
	var placeholder = document.getElementById("placeholder");
	
	placeholder.setAttribute("src", source);
	
	var desc_element = document.getElementById("desc");
	desc_element.childNodes[0].nodeValue = title; //将title负值给desc的第一个子节点，即文本
	
	// desc_element.childNodes[0] 等价于 desc_element.firstChild 
	// desc_element.childNodes[desc_element.childNodes.length - 1] 等价于 lastChild
	return false;
}

function countBodyChildren()
{
	var body_element = document.getElementsByTagName("body")[0];
	alert(body_element.childNodes.length);
}

<完>。