DOM

文档对象模型DOM,将html文档以节点树表示，类似于给HTML的结构画出框图。
exam：
这里写图片描述

通过id获取元素

给标签一个id<p id="con">咩咩咩<p>，id是唯一的，可代表这个标签
var ttt = document.getElementById(“con”);语句为获取标签中的元素存储在变量中
document.write(ttt);这样输出变量时，有两种结果
若获取语句写在标签语句之前，结果为：
null
若获取语句写在标签语句之后，结果为：
[object HTMLParagraphElement]

innerHTML（区分大小写）

Object.innerHTML//用于获取或替换HTML元素的内容

exam：document.write(ttt.innerHTML);输出才是p标签中的内容“咩咩咩”。
若输出元素内容后，再对元素内容进行替换ttt.innerHTML="啦啦啦";
则输出时p标签中的内容也变成“啦啦啦”。但是上一document语句输出不变。

改变HTML 元素的样式

Object.style.property=new style;

Objiect为元素对象，property为基本属性。
exam：

属性	描述
backgroundColor	背景颜色
height	高度
width	宽度
color	文本颜色
fontSize	字体大小
fontFamily	字体样式

display属性（显示和隐藏）

Object.style.display = value

value值	描述
none	隐藏元素
block	显示元素

className属性

1、获取元素的class 属性
2、为网页内的某个元素指定一个css样式来更改该元素的外观

<p id="ttt" class="one">ttt今天也要加油呀</p>//此处css样式为“one”

var bianlaing=document.getElementById('ttt');
bianliang.className="two";//经过该语句以后样式则改为“two”

练习代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过id获取元素</title>
    <style type="text/css">
        input{
            font-size: 10px;
        }
        .one{
            width: 200px;
            background-color: azure;
        }
        .two{
            font-size: 18px;
            color: darkseagreen;
        }
    </style>
    <script type="text/javascript">
        function xian() {
            var xianshi = document.getElementById("ttt");
            xianshi.style.display="block";
        }
        function yin() {
            var  yincang = document.getElementById("ttt");
            yincang.style.display="none";
        }
    </script>
</head>
<body>
<p1 id="con">javascript<br></p1>
<script type="text/javascript">
    var t1=document.getElementById("con");
    document.write("结果:"+t1+"<br>");
    document.write("p1标签原始内容:"+t1.innerHTML+"<br>");
    t1.innerHTML="新内容";
    document.write("修改后内容："+t1.innerHTML+"<br>");
</script>
<p2 id="com">改变HTML样式<br></p2>
<script type="text/javascript">
    var t2=document.getElementById("com");
    document.write("结果："+t2+"<br>");
    document.write("p2标签原始内容:"+t2.innerHTML+"<br>");
    var t3=document.getElementById("com");
    t3.style.backgroundColor="#CCC";
    t3.style.fontSize="30";
    t3.style.color="pink";
</script>
<form>
    <input type="button" onclick="xian()" value="显示内容">;
    <input type="button" onclick="yin()" value="隐藏内容">;
</form>

<p3 id="ttt" class="one">ttt今天也要加油呀</p3>

<script type="text/javascript">
    var tt=document.getElementById('ttt');
    document.write("p元素class为："+tt.className+"<br>");
    function yang() {
         tt.className="two";//改变classname
    }
</script>
<form>
    <input type="button" onclick="yang()" value="添加样式">
</form>
</body>
</html>

学习JavaScript笔记3

DOM