JS中级 - DOM概念



1.元素属性

childNodes

nodeType

attributes

<!DOCTYPE html>
<HTML LANG="en">


<HEAD>


  <META CHARSET="UTF-8">


  <TITLE>Document</TITLE>


</HEAD>


<BODY>


  <UL ID="uid" STYLE="border:1px solid black">


    <LI>1111</LI>


    <LI>2222</LI>


    <LI>3333</LI>


    <LI>4444</LI>


  </UL>


  <script type="text/javascript">


    var uid =  document.getElementById(‘uid‘);




    /*


     *只读属性：childNodes：


     *返回元素的一个子节点的数组


     */


    for (var i = 0; i < uid.childNodes.length; i++) {


      /*只读属性：


       * [element.nodeType]


       * @有12种不同的节点类型，不同的节点类型也可以有不同的子节点类型： 


       * @Node常用类型 :


       * 1 ELEMENT_NODE


       * 2 ATTRIBUTE_NODE


       * 3 TEXT_NODE


       */


       if (uid.childNodes[i].nodeType=="1") {


        uid.childNodes[i].style.background =‘red‘;


       }




      }




    //只读属性：attributes  数组


    document.write("attributes:"+uid.attributes.length);


    document.write("<br>");


    document.write("attributes:"+uid.attributes[1]);


    document.write("<br>");


    document.write("[attributes.name]:"+uid.attributes[1].name+",[attributes.value]:"+uid.attributes[1].value);


  </script>


</BODY>


</HTML> 


如下图：




1


来自为知笔记(Wiz)
				


				
时间： 2024-10-11 00:49:08 

		


		


	

	
	

		


		
JS中级 - DOM概念的相关文章


								

		

			

                小白总结的一些关于JS的基础概念
			

		

		

									

				我的第一篇博客 ——JS的那些基础概念 接触前端已经整整一学年了,这是我第一次写博客,感觉心里装了无数只兔子,很紧张,很激动,也很兴奋. 第一次写,也不知道有没有什么套路,需不需要注意文采之类的.不管了,太激动了,我就直接写只要内容吧!下面是我总结的一些关于JS的基础概念: [变量]从字面上面,变量是可变的量:从编程角度讲,变量是用于存储某些/某种数值的存储器.我们可以把变量看作一个盒子用来存储物 品. [数组]变量用来存储数据,一个变量只能存储一个内容.如果你想存储多个内容,那么就可以用数组解			

		

	

				

		

			

                前端之JavaScript：JS之DOM对象三
			

		

		

									

				js之DOM对象三 一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如    for(var i = 0;i<ele.length;i++){} 第二种:for (var i in li ){} 现在我们来说一下测试一下第二种(数组和obj的) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8">			

		

	

				

		

			

                js之DOM对象三
			

		

		

									

				js之DOM对象三 一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如    for(var i = 0;i<ele.length;i++){} 第二种:for (var i in li ){} 现在我们来说一下测试一下第二种(数组和obj的) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8">			

		

	

				

		

			

                【js常用DOM方法】
			

		

		

									

				介绍几个js DOM的常用方法 获取元素节点 getElementById  getElementsByTagName  getElementsByClassName 先写一个简单的网页做测试: /* test.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>test</title> </head> <body&g			

		

	

				

		

			

                JS and DOM  对象列表
			

		

		

									

				JavaScript 对象(9个) JS Array JS Boolean JS Date JS Math JS Number JS String JS RegExp JS Functions JS Events Browser 对象(5个) Window Navigator Screen History Location HTML DOM 对象(4个) DOM Document DOM Element DOM Attribute DOM Event HTML 对象(...) <a> <			

		

	

				

		

			

                解析JS操作DOM
			

		

		

									

				首先,如何操作DOM可大致分为以下几项: 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. document.body指向的是<body>元素;document.documentElement则指向<html>元素 //创建节点 var createNode = document.createElement("div"); var createTextNode = document.createT			

		

	

				

		

			

                Js操作-DOM操作
			

		

		

									

				js学习--DOM操作详解大全 前奏(认识DOM) 一 . 节点属性 DOM 是树型结构,相应的,可以通过一些节点属性来遍历节点树: 方法 说明 nodeName 节点名称,相当于tagName.属性节点返回属性名,文本节点返回#text.nodeName,是只读的. nodeType 节点的类型,返回值:1,元素节点:2,属性节点:3,文本节点.nodeType 是只读的. nodeValue 节点的值,返回一个字符串,指示这个节点的值.元素节点返回 null,属性节点返回属性值,文本节点返回			

		

	

				

		

			

                Js操作DOM的方式及获取浏览器的宽高
			

		

		

									

				我们在为页面加入一些动态效果或实现一些脚本功能时,需要对文档body中的元素进行操作,也就是,我们需要使用js或jQuery来对dom操作.下面呢,我说一下js是怎样对dom操作的. document.write(),这既可以向文档输出文本,也可以写入代码来添加元素. 获取需要操作的元素: 利用id获取就是:document.getElementById("name"); 利用class获取就是:document.getElementsByClassName("name&qu			

		

	

				

		

			

                js操作dom的一些基本用法
			

		

		

									

				1.js添加dom元素 2.js移除dom元素 --------------