js 基础的学习内容 -云博客

js 基础的学习内容

# 前端 2024-05-05 06:08 0 30 来源：云博客

<!DOCTYPE html> <!--文档声明--><html lang="en"> <!--根节点--> <head><!--树枝节点--><!--父节点--> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title><!--子节点--> <script> //get 获取 Element 元素 ById 根据Id //如果id不存在,返回null //var div = document.getElementById(‘a‘); //console.log(div); //alert(123123); //文档是从上往下依次执行，当执行到此位置时候，div 还没有生成，所以找不到，返回null //var div = document.getElementById(‘box‘); // console.log(div); </script> </head> <style> .hide{ display:none; } </style> <body> //1 概念 // Api // web api // dom // 节点、元素、属性、注释、文档 //2 dom常见的操作 //获取元素 //操作元素（设置元素的属性或者调用元素方法) // 动态创建元素 // 事件（当什么时候做什么事情） //3 获取元素 // document.getElementById() // document.getElementsByTagName() // document.getElementsByName(); // doucument.getElementsByClassName(); // doucument.querySelector(); // doucument.querySelectorAll(); // 4 事件(当什么时候做什么事情) // 三要素：事件源、事件名称、事件处理程序 // 5 元素的属性 // 元素的属性 包括对应标签的属性 // 非表单元素的属性 id src title href alt // 表单元素的属性 name value type disabled cheked selected // 超链接 取消默认行为的执行 return false; <!-- 文档：一个网页可以称为文档html文件抽象为一个对象，文档中所有的内容都是节点 --> <!-- 节点包含属性节点，元素就是标签，文本节点 --> <!-- 事件就是当什么时候做什么操作 --> <!-- 获取元素， 操作元素设置对象的属性和方法，动态创建元素，事件 --> <div> hello </div> <div id="box"> word </div> <div> 黑马 </div> <p id="p">ppppp</p> <div>11111111</div> <div>2222</div> <div>3333</div> <div>pppp</div> <form id="frm" action="1.php"> <input type="text" name="name"><br> <input type="text" name="pwd"><br> <input type="radio" name="sex"><br> <input class="i" type="radio" name="sex"><br> <input type="submit" value="登录"><br> </form> <input type="text" name="test"><br> <div class="a">333</div> <div class="a">333</div> <div class="b">pppp</div> <span>span</span> <input type="button" value="点我" id="btn"><br> <a id="link" href="http://www.baidu.com">baidu</a> <a id="link" href="http://www.baidu.com" title="baidu">百度</a> <img class="hide" id="img" src="1.jpg" alt="图片"> <script> // 1 获取非标单元素的属性 var link = getElementById(‘link‘); var img = getElementById(‘img‘); console.log(link.id); console.log(link.href); console.log(link.title); console.log(img.src); console.log(img.alt); // 2 修改元素的属性 img.src = ‘2.jpg‘; link.title =‘我改过的title‘; link.href = "http://www.cnbeta.com"; img.className = ‘hide‘; //获取超链接 getElementsByTagName()返回的是元素的集合，获取某一个元素的时候用下标 var link = document.getElementById(‘link‘); // var link1 = document.getElementsByTagName(‘a‘); //注册事件 link.onclick = function(){ alert(‘hello‘); //取消后续内容(默认行为)的执行  return false; } // link1[0].onclick = function(){ // alert(‘hello‘) // } var obj={ name:‘zs‘, say:function(){ } }; //js的动态特性 可以随时给对象增加成员 手动调用 obj.test = function(){ } //事件 //获取id获取按钮元素 var btn = document.getElementById(‘btn‘); //给按钮注册事件 // on 当什么时候 click 点击 function 是系统调用的 btn.onclick = function(){ //没有命名的函数叫匿名函数 alert(‘别点我，疼‘); } //事件三要素 //事件源： 触发事件的元素btn //事件名称 click //事件处理函数： 触发事件之后做的事情function· //返回的是集合 //var div=document.getElementsByClassName(); //HTML5 中新增的获取元素的方法IE8以后执行 //query 查询 Selector 选择器 如果class=‘a‘有两个也只会返回一个元素 //查找一个元素，如果页面上有多个符合元素条件的元素也只返回一个元素 var div = document.querySelector(‘.a‘); console.log(div); //返回的是NodeList 节点的集合 放的也是当前元素的集合 var divs = document.querySelectorAll(‘.a‘); console.log(divs); //IE8以后执行 var frm = document.querySelector(‘#frm‘) var texts = frm.querySelectorAll(‘input[type=text]‘); console.log(texts) //根据name来获取元素 //var frm = getElementById(‘frm‘); //获取到的是form中的所有input标签 //var radios = document.getElementsByTagName(‘input‘) //console.log(radios); //NodeList 节点的集合 getElementsByName 放的也是元素 var radios1 = document.getElementsByName(‘sex‘); console.log(radios1); //IE9以后支持，兼容性问题 // HTMLCollection  元素集合 var iclass = document.getElementsByClassName(‘i‘) console.log(iclass); //根据标签的名字来获取元素 //HTMLCollection html元素集合 getElementsByTagName //伪数组 var divs=document.getElementsByTagName(‘div‘); console.log(divs); for(var i =0; i<divs.length; i++) { var div=divs[i]; console.dir(div); } //根据id来获取元素 var box = document.getElementById(‘box‘); //输出的是元素对应的标签的内容 //console.log(box); console.dir(box);//打印对象 //如何获取对象的类型--对象是有类型的 //typeof 不能获取对象的具体类型，获取对象类型始终返回object var arr=[]; console.log(arr); console.log(typeof box); //认为构造函数就是对象的类型 console.log(arr.constructor); console.log(box.constructor); //获取p标签 对应的元素 // HTMLParagraphElement 段落 var p = document.getElementById(‘p‘); console.dir(p); </script> </body></html>

<!DOCTYPE html> <html lang="en">  <head> <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> //get 获取 Element 元素 ById 根据Id//如果id不存在,返回null//var div = document.getElementById(‘a‘); //console.log(div);//alert(123123);//文档是从上往下依次执行，当执行到此位置时候，div 还没有生成，所以找不到，返回null //var div = document.getElementById(‘box‘); // console.log(div); </script> </head> <style> .hide{ display:none; } </style> <body> //1 概念 // Api // web api // dom // 节点、元素、属性、注释、文档 //2 dom常见的操作 //获取元素 //操作元素（设置元素的属性或者调用元素方法) // 动态创建元素 // 事件（当什么时候做什么事情） //3 获取元素 // document.getElementById() // document.getElementsByTagName() // document.getElementsByName(); //doucument.getElementsByClassName(); //doucument.querySelector(); // doucument.querySelectorAll(); // 4 事件(当什么时候做什么事情) // 三要素：事件源、事件名称、事件处理程序 // 5 元素的属性 // 元素的属性包括对应标签的属性 // 非表单元素的属性 id src title href alt // 表单元素的属性 name value type disabled cheked selected // 超链接取消默认行为的执行 return false;
    <div> hello </div> <div id="box"> word </div> <div> 黑马 </div> <p id="p">ppppp</p> <div>11111111</div> <div>2222</div> <div>3333</div> <div>pppp</div> <form id="frm" action="1.php"> <input type="text" name="name"><br> <input type="text" name="pwd"><br> <input type="radio" name="sex"><br> <input class="i" type="radio" name="sex"><br> <input type="submit" value="登录"><br> </form> <input type="text" name="test"><br> <div class="a">333</div> <div class="a">333</div> <div class="b">pppp</div> <span>span</span> <input type="button" value="点我" id="btn"><br>
<a id="link" href="http://www.baidu.com">baidu</a>
<a id="link" href="http://www.baidu.com" title="baidu">百度</a> <img class="hide" id="img" src="1.jpg" alt="图片"> <script>// 1 获取非标单元素的属性var link = getElementById(‘link‘);var img = getElementById(‘img‘);console.log(link.id);console.log(link.href);console.log(link.title);console.log(img.src);console.log(img.alt);
// 2 修改元素的属性img.src = ‘2.jpg‘;link.title =‘我改过的title‘;link.href = "http://www.cnbeta.com";img.className = ‘hide‘;
//获取超链接 getElementsByTagName()返回的是元素的集合，获取某一个元素的时候用下标var link = document.getElementById(‘link‘);// var link1 = document.getElementsByTagName(‘a‘);//注册事件link.onclick = function(){alert(‘hello‘);//取消后续内容(默认行为)的执行 return false;}// link1[0].onclick = function(){// alert(‘hello‘)// }
var obj={name:‘zs‘,say:function(){ }};//js的动态特性可以随时给对象增加成员手动调用obj.test = function(){}//事件//获取id获取按钮元素var btn = document.getElementById(‘btn‘);//给按钮注册事件// on 当什么时候 click 点击 function 是系统调用的btn.onclick = function(){//没有命名的函数叫匿名函数 alert(‘别点我，疼‘);}//事件三要素//事件源：触发事件的元素btn//事件名称 click//事件处理函数：触发事件之后做的事情function·//返回的是集合//var div=document.getElementsByClassName();//HTML5 中新增的获取元素的方法IE8以后执行//query 查询 Selector 选择器如果class=‘a‘有两个也只会返回一个元素//查找一个元素，如果页面上有多个符合元素条件的元素也只返回一个元素var div = document.querySelector(‘.a‘);console.log(div);//返回的是NodeList 节点的集合放的也是当前元素的集合 var divs = document.querySelectorAll(‘.a‘); console.log(divs); //IE8以后执行 var frm = document.querySelector(‘#frm‘) var texts = frm.querySelectorAll(‘input[type=text]‘); console.log(texts)//根据name来获取元素//var frm = getElementById(‘frm‘);//获取到的是form中的所有input标签//var radios = document.getElementsByTagName(‘input‘)//console.log(radios);//NodeList 节点的集合 getElementsByName 放的也是元素var radios1 = document.getElementsByName(‘sex‘);console.log(radios1);//IE9以后支持，兼容性问题// HTMLCollection 元素集合var iclass = document.getElementsByClassName(‘i‘)console.log(iclass);//根据标签的名字来获取元素//HTMLCollection html元素集合 getElementsByTagName//伪数组var divs=document.getElementsByTagName(‘div‘);console.log(divs);for(var i =0; i<divs.length; i++){ var div=divs[i]; console.dir(div);}//根据id来获取元素 var box = document.getElementById(‘box‘); //输出的是元素对应的标签的内容 //console.log(box); console.dir(box);//打印对象 //如何获取对象的类型--对象是有类型的 //typeof 不能获取对象的具体类型，获取对象类型始终返回object var arr=[]; console.log(arr); console.log(typeof box); //认为构造函数就是对象的类型 console.log(arr.constructor); console.log(box.constructor); //获取p标签对应的元素 // HTMLParagraphElement 段落 var p = document.getElementById(‘p‘); console.dir(p);</script> </body></html>