zoukankan      html  css  js  c++  java
  • 10、DOM(文档对象模型)

    1、认识DOM

    html    骨架
    css     装修
    javascript 物业

    DOM 打破上述三者的通道。

    【注】script标签一般情况下要写在head标签。

    <div id = "div1">div文本</div>
    

    1、标签     元素节点对象

    <div></div>
    

    2、id = "div1"   属性节点对象
    3、div文本       文本节点对象

    【注】元素节点对象应该如何在js中被找到。

    window.onload
    当页面加载完成以后,去执行的函数。

    document.getElementById();
                window.onload = function(){
    				var oDiv = document.getElementById("div1");
    				alert(oDiv);
    			}
    

    2、node.getElementsByTagName()

    document.getElementsByTagName()
    格式:node.getElementsByTagName()
    ++功能:从node这个节点开始,找node子节点中符合标签名的所有元素++。
    参数:标签名字
    返回值:查找到所有符合这个标签名的所有元素节点。使用的时候,类似于数组。

            <script>
                window.onload = function(){
    				/*var aDivs = document.getElementsByTagName("div");
    
    				//aDivs使用起来和数组类似。
    
    				alert(aDivs.length);*/
    
    
    				/*var aBtns = document.getElementsByTagName("button");
    				for(var i = 0; i < aBtns.length; i++){
    					aBtns[i].onclick = function(){
    						alert(123);
    					}
    				}*/
    
    				/*
    					找到div1,找到div1下的button
    				*/
    				var oDiv = document.getElementById("div1");
    				var aBtns = oDiv.getElementsByTagName("button");
    				for(var i = 0; i < aBtns.length; i++){
    					aBtns[i].onclick = function(){
    						alert(123);
    					}
    				}
    			}
    		</script>
    
    	<body>
    		<div></div>
    		<div></div>
    		<div></div>
    		<div></div>
    		<div></div>
    		<button>按钮1</button>
    		<button>按钮2</button>
    		<button>按钮3</button>
    		<div id = "div1">
    			<button>按钮4</button>
    			<button>按钮5</button>
    		</div>
    	</body>
    

    3、node.getElementsByClassName()

    【注】IE8以下不兼容。
    node.getElementsByClassName()
    参数:class的名字
    返回值:找到从node节点开始,node子节点中,所有符合条件的元素。
    document 代表   <html></html>

            <style>
    			.red{
    				background-color: red;
    			}
    			div{
    				 100px;
    				height: 100px;
    				margin: 30px;
    				background-color: black;
    			}
    		</style>
    		<script>
    			/*
    			【注】IE8以下不兼容。
    				node.getElementsByClassName()
    				参数:class的名字
    				返回值:找到从node节点开始,node子节点中,所有符合条件的元素。
    
    				document 代表 <html></html>
    			*/
    
    			window.onload = function(){
    				// var nodes = document.getElementsByClassName("red");
    
    				var oDiv = document.getElementById("div1");
    				var nodes = oDiv.getElementsByClassName("red");
    				// alert(nodes.length);
    				for(var i = 0; i < nodes.length; i++){
    					nodes[i].style.backgroundColor = "blue";
    				}
    			}
    		</script>
    	<body>
    		<div></div>
    		<div class = "red"></div>
    		<div></div>
    		<div class = "red"></div>
    		<div></div>
    		<div id = "div1">
    			<span class = "red">文本</span>
    			<button class = "red">按钮</button>
    		</div>
    	</body>
    

    4、document.getElementsByName(name)

    document.getElementsByName();
    1、只能从document开始去查
    2、参数:name的值,
    3、返回值:通过name的值查找到的所有符合条件的元素。

    【注】name属性一般情况,使用在form表单元素中,其他标签就不要去用了。

    获取元素节点的方法
    1、document.getElementById(id)
    2、node.getElementsByTagName(tagName)
    3、node.getElementsByClassName(className)
    IE8以下不兼容
    4、document.getElementsByName(name)

            <script>
    			window.onload = function(){
    				/*
    					
    				*/
    				var nodes = document.getElementsByName("hello");
    				alert(nodes.length);
    
    				
    			}
    			
    		</script>
    	</head>
    	<body>
    		<div name = "hello"></div>
    		<span name = "hello"></span>
    		<input type="text" name = "hello">
    		<textarea name="hello" id="" cols="30" rows="10"></textarea>
    	</body>
    

    5、元素节点的属性

    元素节点 === 标签
    1、tagName    当前元素节点的标签名
    2、innerHTML   标签间的内容

                window.onload = function(){
    				var oDiv = document.getElementById("div1");
    				// alert(oDiv.tagName);
    
    				//获取
    				// alert(oDiv.innerHTML);
    
    				//设置 innerHTML中如果有标签,会解析
    				oDiv.innerHTML = "<strong>粗体文本</strong>"
    			}
    		   
    
    访问属性

    //alert(oDiv.id);
    //alert(oDiv.title);
    //alert(oDiv.className);

    // alert(oDiv.style); //返回的是一个css样式对象
    // alert(oDiv.style.width);
    // alert(oDiv.style.height);

    ++对于带-的样式,要将-去掉,然后后续单词的首字母大写。++
    //++alert(oDiv.style.backgroundColor);++
    oDiv.title = "world";
    oDiv.className = "box2";
    oDiv.style.backgroundColor = "blue";

    6、随机颜色

        <head>
    		<meta charset="UTF-8">
    		<title>Document</title>
    		<style>
    			#div1{
    				 200px;
    				height: 200px;
    				background-color: red
    			}
    		</style>
    		<script>
    			/*
    				rgba(255, 255, 255,1);
    
    				1位十六进制 == 四位二进制
    				红 两位  == 8位
    
    				parseInt(Math.random() * 256)   [0,1)
    			*/
    			function randomColor(){
    				var str = "rgba(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ",1)";
    				return str;
    			}
    
    			window.onload = function(){
    				var oDiv = document.getElementById("div1");
    
    				var i = 15;
    
    				setInterval(function(){
    					oDiv.style.backgroundColor = randomColor();
    					oDiv.style.fontSize = i++ + "px";
    				}, 100);
    			}
    		</script>
    
    
    	<body>
    		<div id = "div1">
    			清醒吧
    		</div>
    	</body>
    

    7、自定义获取元素节点

            <script>
    			function elementsByClassName(node, className){
    				var nodes = node.getElementsByTagName("*");
    				var nodeArr = [];
    				//2、通过循环,找出class = box的节点
    				for(var i = 0; i < nodes.length; i++){
    					if(nodes[i].className == className){
    						nodeArr.push(nodes[i]);
    					}
    				}
    				return nodeArr;
    			}
    
    
    			window.onload = function(){
    				var oDiv = document.getElementById("div1");
    				
    				var nodes = elementsByClassName(oDiv, "box");
    
    				alert(nodes.length);
    				alert(nodes[1].tagName);
    			}
    		</script>
    	<body> 
    		<div id = "div1">
    			<span class = "box">span</span>
    			<button class = "box">button1</button>
    			<button>button2</button>
    		</div>
    		<div class = "box">div</div>
    	</body>
    

    8、练习

    写一个定时器,每个一秒修改一次div内文本颜色和文字大小.
    最开始这个文字是默认大小,大小开始增大,当增大了6次以后,
    文字大小开始缩小,缩小6次,文字再开始增大。

    
    <script>
    			window.onload = function(){
    				var oDiv = document.getElementById("div1");
    
    				var i = 1; //代表一共变化了多少次字体大小。
    				var speed = 10; //字体大小变化的速度。
    
    
    
    				setInterval(function(){
    				    //颜色随机方法在上面
    					oDiv.style.color = randomColor();
    					//1、获取当前的字体大小
    					var currentFontSize = parseInt(oDiv.style.fontSize);
    					//2、累加
    					oDiv.style.fontSize = currentFontSize + speed + "px";
    					if(i % 6 == 0){
    						speed *= -1;
    					}
    					i++;
    				}, 100);
    			}
    		</script>
    	</head>
    	<body>
    		
    		<div id = "div1" style = "font-size: 18px">
    			我是要变化的文本
    		</div>
    	</body>
    

    9、总结,获取元素

            <style>
    			/*选择器*/
    			#div1{
    				 100px;
    				height: 100px;
    			}
    			.box{
    				background-color: red
    			}
    			div{
    				border: 1px solid black;
    			}
    		</style>
    		<script>
    			/*
    				document.getElementById();
    				node.getElementsByTagName();
    				node.getElementsByClassName();
    				document.getElementsByName();
    			*/
    
    			/*
    				封装函数
    				#id     通过id获取元素
    				.class  通过class获取元素
    				tagName 通过tagName获取元素
    				name=xxx通过name获取元素
    			*/
    			function $(vArg){
    				switch(vArg[0]){
    					case "#"://id
    						return document.getElementById(vArg.substring(1));
    						break;
    					case "."://class
    						return elementsByClassName(document, vArg.substring(1));
    						break;
    					default:
    						var subStr = vArg.substring(0, 5);
    						if(subStr == "name="){
    							//name
    							return document.getElementsByName(vArg.substring(5));
    						}else{
    							//tagName
    							return document.getElementsByTagName(vArg);
    						}
    						break;
    				}
    			}
    
    			function elementsByClassName(node, className){
    				var nodes = node.getElementsByTagName("*");
    				var nodeArr = [];
    				//2、通过循环,找出class = box的节点
    				for(var i = 0; i < nodes.length; i++){
    					if(nodes[i].className == className){
    						nodeArr.push(nodes[i]);
    					}
    				}
    				return nodeArr;
    			}
    
    			window.onload = function(){
    				//id = div1
    				// alert($("#div1").id);
    
    				//class = "box"
    				// alert($(".box").length);
    				// alert($(".box")[2].tagName);
    
    				//name='hello'
    				// alert($("name=hello").length);
    
    				//tagName
    				alert($("li").length);
    			}
    
    		</script>
    
    
    	<body>
    		<div id = "div1" class = "box"></div>
    		<span class = "box">span</span>
    		<ul>
    			<li>1</li>
    			<li>2</li>
    			<li class = "box">3</li>
    		</ul>
    		<input type="text" name = "hello" />
    		<textarea name="hello" id="" cols="30" rows="10"></textarea>
    	</body>
    

    10、Attribute

    设置属性
    setAttribute()
    格式:元素节点.setAttribute(key, value);

    获取属性
    getAttribute();
    格式:元素节点.getAttribute(key)

    删除属性
    removeAttribute();
    格式:元素节点.removeAttribute(key)

            <script>
    		
    			window.onload = function(){
    				var oDiv = document.getElementById("div1");
    				//获取属性
    				// alert(oDiv.title);
    				// alert(oDiv.getAttribute("title"));
    
    				// oDiv.title = "world";
    				// oDiv.setAttibute("title", "world");
    
    				/*
    					1、class
    				*/
    				/*alert(oDiv.className);
    				oDiv.className = "box2";*/
    
    				/*alert(oDiv.getAttribute("class"));
    				oDiv.setAttribute("class", "xxx");*/
    
    				/*
    					2、自定义属性
    				*/
    				// alert(oDiv.xxx);
    				// alert(oDiv.getAttribute("xxx"));
    
    				// oDiv.xxx = "yyy";
    				//oDiv.setAttribute("xxx", "yyy");
    
    
    				/*
    					3、removeAttribute()
    				*/
    				// oDiv.className = "";
    				oDiv.removeAttribute("class");
    			}
    		</script>
    	
    	<body>
    		<div id = "div1" title = "hello" class = "box"></div>
    	</body>
    

    11、节点属性

    三种:
    ++1、元素节点++

    <div></div>
    

    ++2、属性节点 id = "div1"
    3、文本节点 div文本 通过元素节点的子节点找到的。++

    元素节点的属性
    childNodes
    firstChild
    lastChild

    **【注】只获取子节点中的元素节点 **
    children
    firstElementChild
    lastElementChild

    parentNode 当前节点的父节点
    previousSibling 找出当前节点的兄弟节点中上一个节点
    nextSibling 找出当前节点的兄弟节点中下一个节点

                window.onload = function(){
    				var oDiv = document.getElementById("div1");
    				// alert(oDiv.childNodes.length);
    				/*alert(oDiv.childNodes[0]);
    				alert(oDiv.childNodes[1]);*/
    
    				alert(oDiv.firstChild);
    				alert(oDiv.lastChild);
    			}
    			
    
                window.onload = function(){
    				var oDiv = document.getElementById("div1");
    				// alert(oDiv.childNodes.length); //5
    				// alert(oDiv.childNodes[0]);
    				
    				// alert(oDiv.children.length);
    				/*alert(oDiv.children[0]);
    				alert(oDiv.children[1]);*/
    				/*alert(oDiv.firstElementChild.tagName);
    				alert(oDiv.lastElementChild.tagName);*/
    
    
    				// alert(oDiv.parentNode.tagName);
    
    				// alert(oDiv.previousSibling);
    				alert(oDiv.nextSibling)
    			}
    
    			/*
    				如何忽略空白节点
    			*/
    		</script>
    
    	<body>
    		<strong>strong2</strong>
    		<div id = "div1">
    			<strong>strong</strong>
    			div文本
    			<span>span</span>
    			xxxx
    		</div>
    		<h1>h1</h1>
    	</body>
    

    12、节点属性

    ++元素节点
    文本节点
    属性节点++ 都有:
    nodeName    nodeType   nodeValue

    节点属性
    image

                window.onload = function(){
    				var oDiv = document.getElementById("div1");
    				/*alert(oDiv.nodeName);
    				alert(oDiv.nodeType);
    				alert(oDiv.nodeValue);*/
    
    				alert(oDiv.firstChild.nodeName);  //#text
    				alert(oDiv.firstChild.nodeType);  //3
    				alert(oDiv.firstChild.nodeValue); //
    			}
    

    13、忽略空白节点方法

            <script>
    			window.onload = function(){
    				var oDiv = document.getElementById("div1");
    				/*
    				文本节点
    					nodeName  #text
    					nodeType  3
    					nodeValue 文本的值
    				*/
    
    				alert(oDiv.childNodes.length);
    				// alert("|" + oDiv.firstChild.nodeValue + "|");
    
    
    				//字符串中的
    代表换行  
    进纸字符
    				/*var str = "  	
        ";
    				var res = /^s+$/.test(str);
    				alert(res);*/
    
    				filterSpaceNode(oDiv);
    				alert(oDiv.childNodes.length);
    				alert(oDiv.childNodes[0].tagName);
    				alert(oDiv.childNodes[1].nodeValue);
    			}
    
    			/*
    				匹配纯空白字符串(包含空格,回车,tab,换行)
    				正则表达式
    				/^s+$/.test()  是纯空白,返回true,否则,返回false
    			*/
    			function filterSpaceNode(node){
    				var nodes = node.childNodes;
    				//通过循环找到所有的空白节点
    				for(var i = 0; i < nodes.length; i++){
    					if(nodes[i].nodeType == 3 && /^s+$/.test(nodes[i].nodeValue)){
    						//肯定是空白
    						//将这个空白节点删除。
    						node.removeChild(nodes[i]);
    					}
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id = "div1">
    			<strong>strong</strong>
    			文本
    			<h1>h1</h1>
    		</div>
    	</body>
    

    14、属性节点

    元素节点
    文本节点 : 元素节点的子节点
    属性节点

    节点属性
    image

            <script>
    			/*
    				元素节点
    				文本节点  元素节点的子节点
    				属性节点
    			*/
    
    			window.onload = function(){
    				/*
    					attributes 获取当前元素节点所有属性节点
    				*/
    				var oDiv = document.getElementById("div1");
    				// alert(oDiv.attributes.length);
    
    				//oDiv.attributes.getNamedItem(key)
    
    				//object Attr
    				/*
    					nodeName   该属性节点的属性名
    					nodeType   2
    					nodeValue  该属性节点的值
    				*/
    getNamedItem() 方法返回节点列表中指定属性名的值。
    
    				// alert(oDiv.attributes.getNamedItem("id"));
    
    				/*alert(oDiv.attributes.getNamedItem("id").nodeName);
    				alert(oDiv.attributes.getNamedItem("id").nodeType);
    				alert(oDiv.attributes.getNamedItem("id").nodeValue);*/
    
    
    				/*alert(oDiv.attributes["id"].nodeName);
    				alert(oDiv.attributes["id"].nodeType);
    				alert(oDiv.attributes["id"].nodeValue);*/
    
    				
    
    
    				//object NamedNodeMap  集合
    				/*
    					集合:
    					1、不重复
    					2、无序
    				*/
    			}
    		</script>
    	</head>
    	<body>
    		<div  class = "box" title = "hello" name = "world" id = "div1"></div>
    	</body>
    

    15、createElement

    document.write在写入内容的时候,会将原有的内容覆盖掉
    document.createElement(标签名);
    ++返回值:创建好的该标签对象++

    document.createTextNode()
    功能:创建文本节点

    DOM节点操作
    image

    <script>
    			function btnClick(){
    				//有一个span节点
    				//创建一个span节点
    				/*
    				document.createElement(标签名);     
                    返回值:创建好的该标签对象	
    				*/
    				var oDiv = document.getElementById("div1");
    				var oSpan = document.createElement("span");
    				//给span节点填充文本
    				/*
    					document.createTextNode()
    					功能:创建文本节点
    				*/
    				/*var oTxt = document.createTextNode("span的内容");
    				oSpan.appendChild(oTxt);*/
    
    				oSpan.innerHTML = "span的内容";
    
    
    				/*
    					node1.appendChild(node2)
    					功能:将node2插入到node1的子节点内,并且,是子节点的末尾。
    				*/
    				oDiv.appendChild(oSpan);
    			}
    		</script>
    	</head>
    	<body>
    		<button onclick = "btnClick();">按钮</button>
    		<div id = "div1">
    			<strong>strong</strong>
    			<h1>h1</h1>
    		</div>
    	</body>
    

    16、insertBefore

            <script>
    			function btnClick(){
    				/*
    					insertBefore()
    					格式:父节点.insertBefore(node1, node2)
    					功能:将node1节点插入到node2节点的前面
    				*/
    
    				var oStrong = document.createElement("strong");
    				var oDiv2 = document.getElementById("div2");
    				var oDiv1 = document.getElementById("div1")
    				// oDiv2.parentNode.insertBefore(oStrong, oDiv2);
    
    				oDiv2.appendChild(oStrong);
    
    				setTimeout(function(){
    					oDiv1.appendChild(oStrong);
    				}, 4000);
    
    			}
    
    			//node1插入到node2的后面
    			function insertAfter(node1, node2){
    				//1、node2后面还有别的元素
    				//2、node2已经是最后一个了,直接插入到
    				if(node2 == node2.parentNode.lastChild){
    					node2.parentNode.appendChild(node1);
    				}else{
    					node2.parentNode.insertBefore(node1, node2.nextSibling);
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<button onclick = "btnClick();">按钮</button>
    		<div id = "div2"></div>
    		<div id = "div1"></div>
    	</body>
    

    17、节点操作

            <script>
    			function btnClick(){
    				/*
    					replaceChild()
    					格式:父节点.replaceChild(node1, node2);
    					功能:用node1替换node2
    				*/
    
    				/*var oSpan = document.createElement("span");
    				var oDiv = document.getElementById("div1");
    				oDiv.parentNode.replaceChild(oSpan, oDiv);*/
    
    				/*
    					cloneNode()
    					参数:true/false 如果true,将该标签和标签间内容,全部克隆
    					返回值:新克隆好的元素节点
    				*/
    				/*var oDiv = document.getElementById("div1")
    				var newNode = oDiv.cloneNode(true);
    				document.body.appendChild(newNode);*/
    
    				/*
    					removeChild()
    					格式:parentNode.removeChild(node)
    					功能:删除node这个节点
    				*/
    				var oDiv = document.getElementById("div1")
    				oDiv.parentNode.removeChild(oDiv);
    			}
    
    		</script>
    	</head>
    	<body>
    		<button onclick = "btnClick();">按钮</button>
    		<div id = "div1">div1</div>
    	</body>
    
  • 相关阅读:
    面试问题整理Andorid版本 date: 2017-1-12 21:14:36 categories: 技术
    轻量级的C++插件框架
    C++程序在Windows平台上各种定位内存泄漏的方法,并对比了它们的优缺点
    Facebook App 的头文件会有更多的收获
    合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友_python
    使用python在校内发人人网状态(人人网看状态)_python
    使用PYTHON创建XML文档_python
    优秀的缓存请求库,快速请求接口和图片:WTRequestCenter
    让读者快速了解RocketMQ消息中间件需要解决哪些问题
    编绎调试HotSpot JVM及在Eclipse里调试HotSpot一些步骤
  • 原文地址:https://www.cnblogs.com/zhongchao666/p/9275510.html
Copyright © 2011-2022 走看看