document对象-8.18

96
轻思维
2017.08.17 00:42* 字数 274

复习

  1. javascript 组成?
  2. window 常用方法
  3. history 对象常用方法
  4. 如何打开一个窗口 ? 关闭呢?
  5. location 对象的常用方法与属性?

单词预习

  • document 文档
  • get 获取
  • element 元素
  • By 通过
  • name 名字
  • Tag 标签名
  • display 呈现,显示
  • style 样式
  • none 没有
  • checked 选中

知识点讲解

3.1 获取元素

方法 描述
getElementById() 返回对拥有指定id的第一个对象的引用
getElementsByName() 返回带有指定名称的对象的集合
getElementsByTagName() 返回带有指定标签名的对象的集合
getElementsByClassName() 返回带有指定class名的对象的集合(ie8)以下不兼容
querySelector() 返回指定css选择器对象的第一个(新版本浏览器才行)
querySelectorAll() 返回指定css选择器对象的集合(新版本浏览器才行)

案例 getElementById

function changeNode(){
    var node=document.getElementById("node");
    if(node.innerHTML=="新浪"){
        node.innerHTML="搜狐";
    }else{
        node.innerHTML="新浪";
    }
    
}

<div id="node">新浪</div>
<input name="b1" type="button" value="改变层内容" onclick="changeNode()" />
image.png

结果

image.png

案例 getElementsByTagName

function showInput(){
    var s=document.getElementById("s");
    var inputs=document.getElementsByTagName("input");
    var str="";
    for(var i=0;i<inputs.length;i++){
        str+=inputs[i].value+"<br/>";
    }
    s.innerHTML=str;
}

<input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" />
<br /><input name="b2" type="button" value="显示input内容" onclick="showInput()"  />
<input name="b3" type="button" value="显示season内容" onclick="showSeason()"  />
<p id="s"></p>
点击前
点击 显示input内容 后

案例 getElementsByName

function showSeason(){
    var s=document.getElementById("s");
    var season=document.getElementsByName("season");
    var str="";
    for(var j=0;j<season.length;j++){
        str+=season[j].value+"<br>";
    }
    s.innerHTML=str;
    
}

点击前
点击显示season内容后

3.2 显示/隐藏

描述
visible 表示元素是可见的
hidden 表示元素是不可见的

visibility属性的值

描述
visible 表示元素是可见的
hidden 表示元素是不可见的

object.style.visibility="值"


描述
none 表示此元素不会被显示
block 表示此元素将显示为块级元素
inline-block 行内的块

display属性的值

描述
none 表示此元素不会被显示
block 表示此元素将显示为块级元素
inline-block 行内的块

object.style.display="值"



点击前
点击 visibility后
点击display隐藏后

js

function hidden1(){
    var b2=document.getElementById("b2");
    if(b2.style.visibility!="hidden"){
        b2.style.visibility="hidden"
                  // 隐藏图像还占原来的位置
    }else{
        b2.style.visibility="visible"
    }
}
function hidden2(){
    var b2=document.getElementById("b2");
    if(b2.style.display!="none"){
        b2.style.display="none"
                // 隐藏图像不占原来的位置
    }else{
        b2.style.display="inline-block"
    }
}

html

![](images/book1.jpg)
![](images/book2.jpg)
![](images/book3.jpg)<br />
<input name="btn1" type="button" value="visibility隐藏图b2" onclick="hidden1()"/>
<input name="btn2" type="button" value="display隐藏图b2" onclick="hidden2()"  />

3.3 树形菜单

树形菜单

3.4 全选效果

  • 复选框的checked属性值
    选中:true
    未选中:false
  • onchange 事件 当表单发生改变时触发
思路
1 为每一个checkbox添加一个onchange事件
for(var i = 0, len = 单选框集合.length;  i++) {
    单选框集合[i].onchange = function() {
        checkAllChecked();       
    }
}
2, 查看是否是全选
function checkAllChecked() {
    var isSelected = true; //全选是否会选中
    // 循环每一个多选框
    for(;;) {
        if(是否没有被选中) {
            isSelected = false;
            break; //退出来
        }
    }
    allCheck.checked = isSelected;
   // 设置全选按钮
}

3. 设置全选
allCheck.onchange = function() {
  if(如果全选按钮被选中){
     // 循环所有的单选框都设置选中
  }else{
      // 循环所有的单选框都设置不选中
    }
}
全选效果

扩展 (有时间讲)

eval(str) 把字符串当 js执行一次(小心使用)


计算器扩展

总结

  1. 获取元素有哪些方法
  2. 如果设置元素的显示与隐藏
  3. 如何设置单选框被选中 或者不被选中
  4. 表单发生改变触发的事件是什么

作业

  1. 全选
  2. 步进器
步进器
  1. 实现简易的计算器(选做)
  2. getElementsByClassName 不兼容怎么办(选做)
请自行百度  getElementsByClassName 如何兼容
提示
className 获取元素 class 的属性值 
elem.className.indexOf(classname+" ") != -1 
|| elem.className.indexOf(" "+classname+" ") != -1
|| elem.className.indexOf(" "+classname) != -1
不正经的 javascript