A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© Pla7737 初级黑马   /  2019-4-25 17:18  /  776 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

1、获取元素方法
可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量。
1.第一种方法:将javascript放到页面最下边


<div id="div1">这是一个div元素</div>


<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
</body>

2,第二种方法:将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行,就不会出错了。

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

<div id="div1">这是一个div元素</div>

3.获取元素的四种方法:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>04_获取元素方法.html</title>
    <!-- 窗体加载完毕之后,获取
    <script type="text/javascript">
        window.onload = function () {
            var div1 = document.getElementById("div1")
            console.info(div1)
        }
        window.onload = function () {
            console.info("孙迎光说你自己没睡觉...你信不信?")
        }
    </script>
    -->
</head>
<body>
    <div id="div1" name="laowang">
        <h1>获取元素方法</h1>
        <img src="xxxxxxx" alt="">
    </div>
    <div id="div2">
        <div id="div21"></div>
        <div class="p1"></div>
        <div class="aaaa1">nini</div>
        <p class="p2" name="laowang"></p>
        <p class="p1"></p>
        <p class="p3"></p>
    </div>
</body>
</html>
<!-- 第一种方式,写在最后
<script type="text/javascript">
    var div1 = document.getElementById("div1")
    console.info(div1)
</script>
-->

<script type="text/javascript">
    //返回的是一个对象    ----
    var div1 = document.getElementById("div1")
    console.info(typeof  div1)
    console.info(div1)

    console.info("***************************************")
    //返回的是一个集合    ----
    var divs = document.getElementsByTagName("div")
    console.info(typeof  divs)
    console.info(divs)
    console.info(divs[0])

    console.info("***************************************")

    var h1s = document.getElementsByTagName("h1")
    console.info(typeof  h1s)
    console.info(h1s[0])

    console.info("***************************************")
    //返回的是一个集合,个别浏览器不兼容
    var p1s = document.getElementsByClassName("aaaa1")
    console.info(typeof  p1s)
    console.info(p1s)

    console.info("***************************************")
    //返回的是一个集合
    var div = document.getElementsByName("laowang")
    console.info(div)

</script>

4、操作元素的属性
获取的页面元素,就可以对页面元素的属性进行操作,属性的操作包括属性的读和写。
操作属性的方法
1、“.” 操作
2、“[ ]”操作
属性写法
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成”style.fontSize”
通过“.”操作属性:
<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // 读取属性值
        var val = oInput.value;
        var typ = oInput.type;
        var nam = oInput.name;
        var links = oA.href;
        // 写(设置)属性
        oA.style.color = 'red';
        oA.style.fontSize = val;

</script>

<input type="text" name="setsize" id="input1" value="20px">
<a  id="link1">老王</a>

通过“[ ]”操作属性:

<script type="text/javascript">

    window.onload = function(){
        var oInput1 = document.getElementById('input1');
        var oInput2 = document.getElementById('input2');
        var oA = document.getElementById('link1');
        // 读取属性
        var val1 = oInput1.value;
        var val2 = oInput2.value;
        // 写(设置)属性
        // oA.style.val1 = val2; 没反应
        oA.style[val1] = val2;        
    }

</script>

<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a  id="link1"></a>

innerHTML :innerHTML可以读取或者写入标签包裹的内容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //读取
        var txt = oDiv.innerHTML;
        alert(txt);
        //写入
        oDiv.innerHTML = '<a >老王<a/>';
    }
</script>

<div id="div1">这是一个div元素</div>

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马