JavaScript DOM编程艺术笔记

最新推荐文章于 2023-05-27 15:34:11 发布

FFFFF2018

最新推荐文章于 2023-05-27 15:34:11 发布

阅读量147

点赞数

本文链接：https://blog.csdn.net/weixin_44210919/article/details/100525679

版权

js的内建对象包括Array,Date,Math等等这些，可以用.去访问属性。
宿主对象：js脚本里一些已经预先定义好的对象。
用户定义对象。
DOM：D:文档 O:对象 M:模型
节点：元素节点：比如<body><h1>之类的元素
文本节点：文本节点总是包含在元素节点的内部，但不是每个元素节点都包含文本节点。
属性节点：用来对元素做出具体的描述。属性节点总是包含在元素节点的内部，但不是每个属性节点都包含文本节点。
获取元素：

1.document.getElementById(),通过id获取元素,返回一个对象；
2.document.getElementsByTagName(),通过标签获取元素，返回一个对象数组；
3.document.getElementsByClassName(),通过类名获取元素，返回一个对象数组；

获取和设置属性：

1.getAttribute();
2.setAttribute();

childNodes:用来获取任何一个元素的所有子元素.

nodeType:元素节点属性值为1，属性节点属性值为2，文本节点属性值为3.

nodeValue:得到一个节点的值。

window.open(url,name,feartures)用来创建新的浏览器窗口。

"javascript:"伪协议，通过一个链接来调用js函数。

下面是一个简单的图片切换函数，

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
		</script>
		<script>
			function showPic(Pic) {
				if(!document.getElementById("imgg")) return false;
				var hh = Pic.getAttribute("href");
				document.getElementById("imgg").setAttribute("src", hh);
				var des = Pic.getAttribute("title");
				var dess = document.getElementById("descri");
				dess.childNodes[0].nodeValue = des;
				return true;
			}

			function Img() {
				var b = document.getElementById("img");
				var links = b.getElementsByTagName("a");
				for(var i = 0; i < links.length; i++) {
					links[i].onclick = function() {
						return !showPic(this);
					}
				}
			}

			function addLoadEcent(func) {
				var oldonload = window.onload;
				if(typeof window.onload != 'function') {
					window.onload = func;
				} else {
					window.onload = function() {
						oldonload();
						func();
					}
				}
			}
			addLoadEcent(Img);
		</script>
	</head>

	<body>
		<h1>图片库</h1>
		<ul id="img">
			<li>
				<a title="图片1" href="img/IMG20170408123918.jpg"> 图片一</a>
			</li>
			<li>
				<a title="图片2" href="img/IMG20170408123924.jpg">图片二</a>
			</li>
		</ul>
		<img id="imgg" src="img/IMG20170408124148.jpg" width="20%">
		<p id="descri">选择图片</p>
	</body>

</html>

ducument.write()可以把字符串插入到文档里。

innerHTML.

document.creatElement().创建一个新的元素节点。

document.creaTextNodet().创建一个新的文本节点。

parent.appendChild().把它成为父节点的子节点。

insertBefore();用法：parentElement.insertBefore(newElement,targetElement)

newElement:新元素

targetElement：目标元素

parentElement：目标元素的父元素。

把新元素插入到目标元素的前面。

insertAfter

function insertAfter(newElement,targetElement)
			{
				var parent=targetElement.parentNode;
				if(parent.lastChild==targetElement)
				{
					parent.appendChild(newElement);
				}else
				{
					parent.insertBefore(newElement,targetElement.nextSibling);
				}
			}

服务器向XMLHttpRequest对象发回响应的时候，readyState属性有5个值;

0:表示未初始化

1：表示正在加载

2：表示加载完毕

3：表示正在交互

4：表示完成

FFFFF2018

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM编程艺术笔记

js的内建对象包括Array,Date,Math等等这些，可以用.去访问属性。宿主对象：js脚本里一些已经预先定义好的对象。用户定义对象。DOM：D:文档 O:对象 M:模型节点：元素节点：比如<body><h1>之类的元素文本节点：文本节点总是包含在元素节点的内部，但不是每个元素节点都包含文本节点。属性节点：用来对元素做出具体的描述。属...
复制链接

扫一扫