Javascript，获取元素，write方法 - .Tang

公告

一：Javascript：弱类型脚本语言，是一种动态类型。实现部分动画效果和用户交互等

　　-- html是骨架（页面结构） css样式 js是行为 --

弱类型体现：

JS代码可以写在body，head中。

　　如果需要写在body中，但有需要它最后执行 可以先加上window.onload=function(){ alert(1)}

<head>
    <script>
         window.onload = function(){
         alert(1)
        }
    </script>
</head>
<body>
    <script>
        alert(2);
        console.log("haha");
    </script>
</body>

效果先弹出 2 ，在打印 haha 到控制台最后弹出 1

　　类似css的三种样式，行内，元素内，外链

1.行内

<body>
    <!--1.行内 单击时弹出窗口 显示 1-->
    <div onclick="alert(1)"></div>
</body>

效果

2.元素内

<body>
    <!--2.script标签内-->
    <script>
        alert(2);
        console.log("打印在控制台");>
    </script>
</body>

效果：先弹窗 2 ，点击确定在打印到控制台console

3.外链

<body>
    <script src="new.js"></script>
</body>

　　new.js

alert("我先")
console.log("haha")

效果：先出现弹窗再打印log haha

定义变量

<body>
   <script>
        var a=1;        // number
        var b=1.1;      // number
        var c="haha";   // string
        var x=10,y=11;  //同时设置多个值
        alert(typeof(a));   // 弹出 a 的类型
        alert(x+y)         // 弹出 x+y的值
    </script>
</body>

可以先定义变量名不给值占位，需要用它的值再赋值

    </script>
        var d,f;
        d=1;
        f=2;
        alert(d*f);
    </script>

二：获取元素

　　1.获取独立的标签 document+标签=" 赋值的内容"

　　document.title=

　　document.body.innerHTML="将值赋给了整个body，body拥有的其他内容就没了"

　　document.body.innerHTML+="消除方法 += 。新增加内容"

innerHTML能够解析标签: 将内容加粗斜体

document.body.innerHTML+="消除方法 += 。新增加内容"

innerTEXT不能解析标签：会将加粗斜体标签当作内容显示在浏览器上

document.body.innerHTML+="消除方法 += 。新增加内容"

<body>
    <script>
        document.title="改变标题"  // 只有title 这样写
        // document.body = "body网页上显示的内容"   // 报错，除title以外，body后面还得加上innerHTML
        // document.body.innerHTML = "body网页上显示的内容"   // 将值赋给了整个body，body拥有的其他内容就没了
        document.body.innerHTML += "body网页上显示的内容"   // 消除方法 += 。新增加内容
    </script>
</body>

　　2.通过id获取元素 document.getElementById

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>

</body>
    <div id="box1" title="h">我是div</div>        /*这儿的title是 鼠标移到div上会显示的内容是h*/
    <script>
        document.getElementById("box1").innerText="通过id获取元素在改变的"
    </script>
</body>

效果改之前之后

3.通过标签名获取Tagname，多个p标签 需要加下标

document.getElementsByTagName("p")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <script>
        // 通过标签名获取 Tagname 多个p标签  需要加下标
        // document.getElementsByTagName("p");
        var oP=document.getElementsByTagName("p");
        // 查看有几个元素
        alert(oP.length);  // 弹出窗口显示4 代表有四个P
        // 通过下标该值 改第一个P
        oP[0].innerHTML+="第一个p";
    </script>
</body>
</html>

效果

4.通过classname

        // 通过classname
        var oClassname=document.getElementsByClassName("box2");
        alert(oClassname.length)
        oClassname.innerHTML[0]="dff";
    </script>

5.通过选择器

<div class="box2">
    <p class="p1">1</p>
    <p class="p1">2</p>
    <p class="p1">3</p>
    <p>4</p>
</div>

<1>.// querySelector只选中一个元素

document.querySelector(".box2>.p1").innerHTML="<b>1</b>"  // 选择第一个p1

<2>.// querySelector选中多个元素通过下标选择

oCls=document.querySelectorAll(".box2 .p1");
alert(oCls.length)            // 3  p1
oCls[1].innerHTML="改了吗"    // 改下标为1的值  第二个p1

三：write方法有两种情况

    <div>
        测试write
    </div>
    <script>        
        // 1.在文档流关闭之前写入
        document.write("在文档流关闭之前写入")
    </script>

效果：write之前之后新增内容

2.在文档流关闭之后写入

    <script>
        // 2.在文档流关闭之后写入
        window.onload=function () {
            document.write("在文档流关闭之后写入")
        }
    </script>

效果修改了整个html的内容，只剩下写入的内容了

posted on 2018-01-19 14:33 .Tang 阅读(586) 评论(0) 编辑收藏举报

刷新页面返回顶部