24.11.13 Javascript3

标签：13 document console log 元素 24.11 getElementById let Javascript3

Javascript3

1.dom元素获取

查找元素的函数     
    getElementById("id值")                      查找到唯一一个元素
    getElementsByClassName("class值")           查找指定class的元素数组
    getElementsByTagName("标签名")               查找指定标签名的元素

    document.getElementById("myDiv").getElementsByTagName("input")    在元素内部查找指定元素
    document.getElementById("myDiv").getElementsByClassName("mycls")  在元素内部查找指定元素

查找元素的属性
    dom树中 根据节点关系查找
    子节点
        children           所有子节点(集合)
        firstElementChild  元素
        lastElementChild   元素
    兄弟(同级)节点
        nextElementSibling  下一个兄弟(同级)节点
        previousElementSibling 上一个兄弟(同级)节点
    父节点
        parentElement      父元素节点

示例:

console.log(document.getElementById("myUl").children);//元素集合   HTMLCollection
    console.log(document.getElementById("myUl").childNodes);//节点集合 NodeList 不要用
    console.log(document.getElementById("myUl").getElementsByTagName("li"));

    console.log(document.getElementById("myUl").firstChild);//节点 如果有空白文本 会获得文本
    console.log(document.getElementById("myUl").firstElementChild);//元素节点

    console.log(document.getElementById("myUl").lastElementChild);//元素节点



                console.log(document.getElementById("myli").nextElementSibling.nextElementSibling.previousElementSibling.previousElementSibling.previousElementSibling);
    
    console.log(document.getElementById("myli").parentElement.parentElement)

js操作时需要先获取元素

以上有丰富的api来查找元素使用

2.dom操作属性

js中属性操作

    属性形式操作属性
    读属性
    元素.属性
    写属性
    元素.属性 = "xxx"

    函数形式操作属性
    Attribute  属性 
    Properties 属性
    读属性
    getAttribute("属性名")
    写属性
    setAttribute("属性名","属性值")

    两套不完全体通用 (js语法特点)

document.getElementById("myText").value = "你好"
   document.getElementById("myText").setAttribute("val"+"ue","你不好");

所有的效果都是找元素改属性

3.动态dom操作

原生js动态操作(了解)

创建元素(不会出现在dom树上  
            虚拟dom元素 支持属性设置)
    document.createElement("li")
//元素表示document.getElementById("xxx")
    追加子元素(可以把元素渲染出来 挂在dom树上)
    元素.appendChild(newEle)

    在指定元素前添加
    元素.insertBefore(newEle,指定的元素)

    复制节点
    元素.cloneNode(true)  bol值决定子节点是否赋值 默认值false

    删除元素
    元素.removeChild(删除的节点); //通常搭配查找元素使用

创建元素

两个步骤 1.生成出元素(虚拟dom结构可以设置属性页面上没有)

2.渲染(通过特定api 把元素显示到页面中的某个为止挂载到dom树上)

function addEle(){
       
        //js创建元素
        //先生成虚拟dom结构
        //可以设置其中各种属性
       let newEle = document.createElement("li");
       //简化dom操作
       //innerHTML可以解析html标签
       newEle.innerHTML ="<input type='button' value='test'/>";//可以解析html标签

    //    let newBtn = document.createElement("input");
    //    newBtn.type="button";
    //    newBtn.value = "新按钮";
    //    newEle.appendChild(newBtn)

       //渲染
       document.getElementById("myUl").appendChild(newEle);

       //document.getElementById("myUl").lastElementChild.innerHTML = "nexLi";

    }

删除元素

function delEle(){
        document.getElementById("myUl").removeChild(document.getElementById("myUl").firstElementChild);
    }

简化dom操作(***)

//innerHTML可以解析html标签

1.追加 和替换 可以借助innerHTML可以解析html标签的特征完成
2.删除 用原生api实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="添加元素" onclick="addEle()">
    <input type="button" value="删除元素" onclick="delEle()">
    <ul id="myUl">
        <li id="myLi"><input type="button" value="测试按钮"></li>
    </ul>
</body>
<script>
    /*
    
    1.追加 和替换 可以借助innerHTML可以解析html标签的特征完成
    2.删除 用原生api实现
    
    */

    function addEle(){
        let content = `<li><input type="button" value="新按钮"></li>`

       document.getElementById("myUl").innerHTML += content
    }

    function delEle(){
        document.getElementById("myUl").removeChild(document.getElementById("myUl").lastElementChild);

        
    }



</script>
</html>

4.动态table操作

js中会table描述为数组(了解)

通过索引添加删除

同样可以使用简化操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="添加一行数据" onclick="addRow()">
    <input type="button" value="添加一行数据" onclick="addRow2()">
    <input type="button" value="删除一行数据" onclick="deleteOneRow()">
    <table id="myTable" border="1">
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>住址</th>
        </tr>
        <tr>
            <td>1</td>
            <td>尼古拉斯赵四</td>
            <td>象牙山</td>
        </tr>

    </table>
</body>
<script>
    let stuData = [[1,"小明","封样大道"],[2,"小明2","封样大道2"],[3,"小明3","封样大道3"]]
    //insertRow 用于在表格里插入一行数据,(参数)是插入的位置 从0开始
    //insertCell(0)用于在表格插入表格，参数是表格的索引 从0开始
    function addRow(){
        let newRow = document.getElementById("myTable").insertRow(1)
        let td1 = newRow.insertCell(0)
        let td2 = newRow.insertCell(1)
        let td3 = newRow.insertCell(2)
        td1.innerHTML="2"
        td2.innerHTML="2"
        td3.innerHTML="2"
    }

    function addRow2(){

        for(let obj of stuData){
            //拼号要生成的元素
            let content = `<tr>
                        <td>${obj[0]}</td>
                        <td>${obj[1]}</td>
                        <td>${obj[2]}</td>
                        </tr>`
            //把元素添加到页面中                
            document.getElementById("myTable").innerHTML += content
        }


    }
    function deleteOneRow(){
        document.getElementById("myTable").deleteRow(1)
    }

</script>
</html>

5String字符串对象

js中字符串   ''  ""   ``
     js中处理字符串更多

查找指定字符串出现的索引位置
indexOf 
lastIndexOf 

更多用在检测字符串是否存在
if(myStr.lastIndexOf("bc1111")>=0)

截取字符串

substring(起)    substring(起,止)  
substr(起)       substr(起,个数)

分割字符串  根据指定的字符分割为数组

let myStr2 = "age=15;name=jack;addr=streetABC";
console.log(myStr2.split(";")[1].split("=")[1]);
得到name的值部分jack

转大写 toUpperCase
    console.log(myStr.toUpperCase());
    
转小写 toLowerCase
    console.log(myStr.toLowerCase());

替换字符串
let myStr = "abc123abcdef";
console.log(myStr.replace("123","你好"))

结果为 "abc你好abcdef";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    /*
     js中字符串   ''  ""   ``
     js中处理字符串更多
    
    */

    let myStr = "abc123abcdef";
    // indexOf lastIndexOf 
    //表示指定字符串存在
    //if(myStr.lastIndexOf("bc1111")>=0) 
   // console.log(myStr.lastIndexOf("bc1111"));
   //  substring(起)    substring(起,止)  
   //  substr(起)       substr(起,个数)  
   console.log(myStr.substring(2,4));
   console.log(myStr.substr(2,4));
    //分割字符串  根据指定的字符分割为数组
    //常用在有格式的字符串解析上
    let myStr2 = "age=15;name=jack;addr=streetABC";
   console.log(myStr2.split(";")[1].split("=")[1]);
    //转大写 toUpperCase
    console.log(myStr.toUpperCase());
    
    //转小写 toLowerCase
    console.log(myStr.toLowerCase());
    //字符替换
    console.log(myStr.replace("123","你好"))

</script>
</html>

6数学计算对象

let myNum = 10.5;
    //向上取整 ceil
    console.log(Math.ceil(myNum));
    //向下取整 floor
    console.log(Math.floor(myNum));
    //四舍五入 round
    console.log(Math.round(myNum));
    //绝对值 算两个数之间的差值
    let a = 1;
    let b = 3;
    console.log(Math.abs(a-b));
    //随机数 random [0,1)
    //  0-2 +1   1-3
    console.log(parseInt(Math.random()*3));//向上 1-10  向下 0-9   四舍五入 0-10
                                  //一般用向下取整 
                                  //比最终要的值大1
                                  //扩倍 移动区间

注意:js中随机数需要手动计算通过取整扩倍移动区间得到需要的随机数

7日期对象

1日期获取

//获取当前运行的事件
  console.log(new Date());
//获取指定日期的事件
// 2001-11-11 11:11:11
// 2021/12/12 12:12:12     
console.log(new Date('2001-11-12 11:11:11'));
console.log(new Date('2021/12/12 12:12:12'));

2日期计算

// 做日期计算
let nowDate = new Date();
console.log(new Date(nowDate.getTime()-1000*60*60*24*5) );

3日期显示

//获取年
let myYear = nowDate.getFullYear();
console.log(myYear);
//获取月 0-11
let myMonth = nowDate.getMonth()+1;
console.log(myMonth);
//获取星期
let myDay = nowDate.getDay();
//获取日期
let myDate = nowDate.getDate();
console.log(myDay);//日期当中的日
console.log(myDate);//这周星期几

//获取时
let myHours = nowDate.getHours()
console.log(myHours);
//获取分
let myMinutes = nowDate.getMinutes()
console.log(myMinutes);
//获取秒
let mySeconds = nowDate.getSeconds()
console.log(mySeconds);

let dateStr = `${myYear}年${myMonth}月${myDate}日 ${myHours}:${myMinutes}:${mySeconds} 星期${myDay}`;
console.log(dateStr);

8数组对象

数组  数据的集合 
              1.指定数据类型
              2.指定数组长度(不可变)
              底层数据结构(需要再内存中直接占用空间)
        js弱类型
        js数组 没有加泛型的list
               不需要指明数据类型
               长度可变

//1.数组创建

let newArr = new Array();
    console.log(newArr);
    let newArr2 = [];
    console.log(newArr2);

//2.数组中的内容

//js中数组什么都可以放
   let newArr3 = [1,"abc",true,new Date(),[1,2,3]];
    console.log(newArr3);
    //实际使用时 一般把相同数据类型的数据放入一个数组
    let newArr4 = [4,1,3,8,6,2];
    console.log(newArr4);

//3.数组常用方法

//join 把数组串成字符串
    //经常与字符串的split方法对应起来 字符串 与 数组 互换
    console.log(newArr4.join(";"));
    console.log(newArr4.join(";").split(";"));


    //排序  排序规则  function(a,b){return a-b} a-b 升序 b-a降序
    console.log(newArr4.sort(function(a,b){return a-b}));


    //当链表使用
    /*
    newArr4.push("a")     队尾添加
    newArr4.pop()         队尾删除
    newArr4.unshift("a")  队头添加
    newArr4.shift()       队头删除
    */
    newArr4.push("a")
    newArr4.pop()
    newArr4.unshift("a")
    newArr4.shift()
    console.log(newArr4);


    //splice()动态操作数组元素方法
    //splice(起始,个数,可以选参数)
    // 如果没有可选参数 可以做删除
    // 如果有可选参数   做替换 根据个数 与可选参数的个数 决定增加还是减少
    newArr4.splice(2,1,"a","b")

//4数组遍历 //Array可对元素属性进行调整

newArr4.forEach(function(data){
        console.log(data);
    })

注意:如果是从页面获取元素 要用forEach遍历 需要转换类型
    //获取元素集合  Prototype HTMLCollection
    let eles = document.getElementById("btns").children;
    //Prototype  Array 包含的函数和属性不同
    //Array.from(eles);
    //把非Array的数组类型 转成Array 可以调用array的函数了
    let newEles = Array.from(eles);
    console.log(newEles);
    //转换后 可以forEach遍历
    newEles.forEach(function(data){
        data.style.color="red"
    })

9JSON对象

JSON javascript对象标记

//JSON格式
    //{key:value,key:value}
    //像map 做自定义对象的
    let myStu = {"ID":1,"name":"jack","age":15};
    console.log(myStu.name);
    myStu.name = "rose";
    console.log(myStu);

json可以方便的 定义 读取 赋值 扩展

//数据类型
    //key     字符串
    //value   任意类型

    let myObj = {"name":"jack","age":15,"birthDay":new Date(),"study":function(){
        //this 指向当前json对象
        console.log(this);
        console.log(this.name+"在学习");
    }};
    console.log(myObj);

    myObj.study()

//json书写格式
    //标准格式 key带引号 指明是字符串  {"ID":1,"name":"jack2","age":18};
    //简化格式 key的引号 可以省略不写  {ID:1,name:"jack",age:15};
    let newStu = {ID:1,name:"jack",age:15};
    console.log(newStu);
    //前后端数据传递 使用标准json格式
    //纯前端使用     使用简化格式
    // let newStuStr = '{ID:1,name:"jack",age:15}'
    // console.log(JSON.parse(newStuStr).name);

    //json转换方法
    //JSON.stringify(newStu)                          json对象转标准格式字符串
    //JSON.parse('{"ID":1,"name":"jack2","age":18}')  标准格式字符串 转json对象
    console.log(JSON.stringify(newStu));
    console.log(JSON.parse('{"ID":1,"name":"jack2","age":18}'));

//json实际使用时 经常搭配数组使用
    let students = [{ID:2,name:"jack",age:15},{ID:2,name:"jack2",age:15},{ID:3,name:"jack3",age:15}]
    let myClass = {className:922,classAddr:'9楼922',students:[{ID:2,name:"jack",age:15},{ID:2,name:"jack2",age:15},{ID:3,name:"jack3",age:15}]}

省市县级联练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 级联菜单
         子级数据 根据父级数据动态生成 
    
    -->
    <select id="provSelect" onchange="changeCityList()">
        <option>---------请选择------------</option>
    </select>省
    <select id="citySelect" onchange="changeCounty()">
        <option>---------请选择------------</option>
    </select>市
    <select id="countySelect">
        <option>---------请选择------------</option>
    </select>县/区
</body>
<script src="./js/myData.js"></script>
<script>

    /*
    1.元素动态生成  替换
    2.练习json使用
    
    */

    console.log(areaData);

    let currentCityList = [];

    //1填充省数据
    areaData.forEach(function(prov){
        //拼元素
        let content = `<option value="${prov.code}" >${prov.name}</option>`;
        //console.log(content);
        //追加元素
        document.getElementById("provSelect").innerHTML+=content
    })

    //2省市联动
    //省选择之后 找到省对应的市列表 拼到市的select中

    function changeCityList(){
        //当前选中的省编号
       let currentProv =  document.getElementById("provSelect").value
       console.log(currentProv);

       //清理选项 从请选择开始
       //清市列表
       document.getElementById("citySelect").innerHTML="<option>---------请选择------------</option>"
        //清县区列表
       document.getElementById("countySelect").innerHTML = "<option>---------请选择------------</option>"

       areaData.forEach(function(prov){
            if(currentProv == prov.code){
                //找到省了 读取市列表
                //console.log(prov.city);
                //保留当前市列表
                currentCityList = prov.city;
                //把city列表 写入到citySelect中
                prov.city.forEach(function(city){
                    //拼元素
                    let content = `<option value="${city.code}">${city.name}</option>`;
                    //追加元素
                    document.getElementById("citySelect").innerHTML+=content
                })
            }
       })
       
    }


    function changeCounty(){
         //当前选中的市编号
       let currentCity =  document.getElementById("citySelect").value

       console.log(currentCity);
        //选项从头开始
       document.getElementById("countySelect").innerHTML = "<option>---------请选择------------</option>"
       //根据暂存的市列表 找到当前的市信息 
       currentCityList.forEach(function(city){
        if(city.code == currentCity){
            //找到市中的县区
            //console.log(city.area);
            city.area.forEach(function(county){
                 //拼元素
                 let content = `<option value="${county.code}">${county.name}</option>`;
                 document.getElementById("countySelect").innerHTML+=content;
            })
            
        }
       })
       
    }

    

</script>
</html>

标签：13,document,console,log,元素,24.11,getElementById,let,Javascript3
From： https://blog.csdn.net/2401_87910368/article/details/143754624