[JavaScript]了解Dom_封装函数

最新推荐文章于 2022-06-06 15:36:06 发布

初露微微

最新推荐文章于 2022-06-06 15:36:06 发布

阅读量198

点赞数

分类专栏： Javascript 文章标签： js css javascript html

本文链接：https://blog.csdn.net/wy1948/article/details/119855938

版权

Javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

	     id          document.getElementById()
	     tagName     node.getElementsByTagName()
	     name        document.getElementsByName()  返回数组
	     className   document.getElementsByClassName() 返回数组

	     通过封装函数  简化上述的操作
	     封装一个函数,可以拥有上述几种获取元素节点的功能
	     [注]css选择器
	         #id   通过id获取元素节点
	         .class  通过className获取元素节点
	         tagName  通过tagname获取元素节点
	         name=xxx  通过name获取元素节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Dom_封装函数</title>
		<script type="text/javascript">
		/* 
		     id          document.getElementById()
		     tagName     node.getElementsByTagName()
		     name        document.getElementsByName()  返回数组
		     className   document.getElementsByClassName() 返回数组
		 */
		 /* 
		     通过封装函数  简化上述的操作
		     封装一个函数,可以拥有上述几种获取元素节点的功能
		     [注]css选择器
		         #id   通过id获取元素节点
		         .class  通过className获取元素节点
		         tagName  通过tagname获取元素节点
		         name=xxx  通过name获取元素节点
		  */
  
  function $(vArg) {
          //通过获取css选择器第一位符号判断
           switch (vArg[0]) {
              case "#":
                  return document.getElementById(vArg.substring(1));
                   break;
              case ".":
                  return elementByClassName(document,vArg.substring(1))
                   break;
              default:
              //对参数前五个字符进行判断
                  var str =vArg.substring(0,5);
                  if (str == "name=") {
                      return document.getElementsByName(vArg.substring(5))
                  } else {//tagName
                      return document.getElementsByTagName(vArg)
                  }
                   break;
           }
       }
       function elementByClassName(parent,classStr) {
           var nodes = parent.getElementsByTagName('*');
           var result = [];
           for (var i = 0; i < nodes.length; i++) {
              if (nodes[i].className == classStr) {
                  result.push(nodes[i]);
              } 
           }
           return result;
       }
	   // 调用封装函数
      window.onload=function(){
		  // alert($("#div1").innerHTML); 输出“1111”
		  // alert($(".box")[0].innerHTML); 输出"22222"
		     // alert($(".box")[1].innerHTML); 输出"33333"
		  // alert($("name=hello")[0].innerHTML);输出“4444”
		  // alert($(".box").length);输出“2222”
	  }
		 
		</script>
	</head>
	<body>
		<div id="div1">1111</div>
		<div class="box">22222</div>
		<div class="box">3333</div>
		<div name="hello">44444</div>
	</body>
</html>

初露微微

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[JavaScript]了解Dom_封装函数

日常摸鱼，偶尔学习…1.获取行内样式获取行内样式可以通过一下方式，但是以下的方式对于页面的行外样式和外联样式无法获取。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Dom—获取当前样式</title> <style> #Div1{ background-color: red; height: 300px; }.
复制链接

扫一扫

专栏目录