DOM:document object module 文档对象模型
DOM就是描述整个html页面中节点关系的图谱,如下图。
1,通过ID,获取页面中元素的方法;(上下文必须是document)
document.getElementById('元素的ID');
2,通过name属性获取一组元素;(上下文必须是document)
<body> <input name = 'cniao' type='radio' value='菜'> <input name = 'cniao' type='radio' value='菜菜'> <script> var x = document.getElementByName('cniao'); console.log(x); </script> </body>
3,在整个文档中,通过元素的标签名获取一组元素;(上下文可以是document,也可以是一个元素)
document.getElementsByTagName('元素标签名')
<body> <div> <p> 这是第一个P标签</p> <p> 这是第二个P标签</p> <p> 这是第三个P标签</p> </div> <script> document.getElementByTagName('p')[1].innerHTML = '你好,P标签'; //当中括号里面的1改为[*]时,获取的是文档中的所有元素。 </script> </body>
4,通过类名获取元素,用法与getElementsByTagName类似;(上下文可以是document,也可以是一个元素)
getElementsByClassName;
5,以一个元素对象返回一个文档的文档元素;(只能是html这个标签)
document.documentElement;
6,获取body标签的方法;(是能是body标签)
document.body
7,匹配指定选择器的第一个元素;(上下文可以是document,也可以是一个元素)
querySelector()
8,通过选择器获取一组元素;(上下文可以是document,也可以是一个元素)
querySelectorAll
For循环
for (1开始执行的代码块,2定义循环条件,3循环被执行之后执行){
被执行的代码块
};
for (var i = 0; i<3; i++){ console.log( i ); };
循环里的关键字
break 跳出循环; continue 跳过本次循环;
function cniao(){ var x = '', i = 0; for (1=0;i<10;i++){ if (i==3){ break; //循环到3时,就会结束;后面的数字不会循环出来; }; x = x + '该数字' + i + '<br>' }; };
function cniao(){ var x = '', i = 0; for (1=0;i<10;i++){ if (i==3){ continue; //跳过 i = 3这次循环,后面的数字会继续循环出来; }; x = x + '该数字' + i + '<br>' }; };
While循环
while循环会在指定条件为真时循环执行代码块;
while (条件){
需要执行的代码
};
while ( i<3 ){ x = x + "The number is " + i + "<br>"; i ++; }
do/while 循环
循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真,就会重复这个循环;
do{
需要执行的代码;
}
while (条件)
do{ x = x + "This number is " + i + "<br>"; i ++; } while ( i<3 );
getAttribute()方法,获取链接的target属性值;
<body> <a href = '' target = 'black'>对象属性</a> <p id = "demo">点击显示目标属性</p> <button οnclick="cniao">点我</button> <script> function cniao(){ var a = document.getElementsByTagName('a')[0]; document.getElementById("demo").innerHTML = a.getAttribute('taget'); } </script> </body>
setAttribute()方法设置元素的属性类型;
<body> <input value = "ok"> <button onclick = 'cniao'>点我</buttom> <script> function cniao(){ document.getElementsByTagName('input')[0].setAttribute('type','button'); }; </script> </body>
removeAttribute()方法删除指定的属性;
<body> <h1 style = 'color:red'>Hello World</h1> <button onclick = 'cniao'>点我</button> <script> function cniao(){ document.getElementsByTagName('h1')[0].removeAttribute('style'); }; </script> </body>