js 节点 document html css 表单节点操作

Posted 2020-06-09

js 节点 document html css 表单节点操作

节点操作：访问、属性、创建
（1）节点的访问：firstChild、lastChild、childNodes、parentChild(父子节)
        可以使用元素对象的方法进行代替：getElementById()、getElementsByTagName()
（2）节点属性的操作：setAttribute()、removeAttribute()、getAttribute()
（3）节点的创建、删除、追加：
创建节点：document.createElement(tagName)
        删除节点(必须父节点下的子节点才能被删除)：parentObj.removeChild(nodeObj)
        追加节点：parentObj.appendChild(nodeObj);

CSS DOM
核心：就是给一个元素对象，增加样式(外观)。
概述：每一个HTML标记都有一个style属性，它对应元素元素的style属性，该style属性是一个对象。
    Style对象有哪些属性：style对象的属性，与CSS中的属性一一对应。
    obj.style.border = “1px solid #FF0000”
    obj.style.width = “400px”;  //CSS一定要加单位
    obj.style.position = “absolute”;
    

<img id=“img”  />是一个HTML标记，它的属性有：src、 width、height、alt、border、style、title等
每一个标记都对应一个元素对象，元素对象的属性与标记的属性一模一样。
var obj = document.getElementById(“img”);
obj.src = “images/bg.gif”;
obj.width = 400;
obj.border = 1;
obj.style = “padding:20px;”

CSS属性与style对象的属性的转换问题
（1）如果是一个单词的属性，CSS与style属性一模一样；如：obj.style.width = “400px”
（2）如果是多个单词的属性，转成style对象属性时，转换规则是：第一个单词全小写，后面的单词首字母大写，并且去掉中间的连接线（-）
    举例：
            background-color   转换后     obj.style.backgroundColor = “#FF0000”
            font-size          转换后     obj.style.fontSize = “18px”
            
    //获取id=box的对象
    var obj = document.getElementById("box");
    //给id=box的对象增加样式
    obj.style.width = "400px";
    obj.style.height = "300px";
    obj.style.border = "2px dotted #ccc";
    obj.style.backgroundColor = "#f0f0f0";
    obj.style.margin = "50px auto";
    obj.style.fontSize = "24px";
    obj.style.color = "#FF0000";


HTML DOM
一、HTML DOM的特性
    （1）每一个HTML标记，都对应一个元素对象。每个标记，都是一个对象，是一个节点。例如：<img>对应一个img对象，一个<table>标记，对应一个table对象，一个<form>标记，对就form对象等。
    （2）HTML标记的属性，与元素对象的属性一模一样。
        <img>标记属性：src、width、border、height等
        imgObj.src = “images/bg.gfi”;
        imgObj.width = 400;
        imgObj.height = 300;
        imgObj.border = 2;


二、访问HTML元素的方法总结
1、通过document对象的getElementById()方法来访问，返回一个对象
    <div id=”box”></div>
    var obj = document.getElementById(“box”);   //获取对象
    var img = document.createElement(“img”);    //  创建节点
    img.src = “images/img01.jpg”;   //使用元素对象的属性
    img.border = 2;
    img.style.padding = “10px”;  //使用style对象来增加样式
    img.style.float = “left”;
    obj.appendChild(img);  //将img节点，追加到id=box中去
2、通过父元素的getElementsByTagName()方法来访问，返回一个数组对象
    语法结构：var arrObj = document.getElementsByTagName(“li”)
    功能描述：取得标记为<li>的一个数组(标记列表)。
    举例：取得一个<ul>标记中的所有的<li>标记
        //获取id=ul的对象
        var ulObj = document.getElementById("ul");
        //取得所有的li对象的一个数组
        var arrLi = ulObj.getElementsByTagName("li");
        //修改第二个和第四个li的样式
        arrLi[1].style = "font-size:24px;color:#ff0000;";
        arrLi[3].style.textDecoration = "underline";

3、通过name属性来访问（一般用于表单元素）
    onsubmit事件：当单击“提交按钮”时，发生的事件。事件的返回值，直接决定默认动作的执行。
    onsubmit的返回值，如果为true或空，则表单提交；如果为false，则阻止表单提交。
<form name="form1" action="login.php" method="post" onsubmit="return checkForm()">
    用户名：<input type="text" name="username" />
    密码：<input type="password" name="password" />
    <input type="submit" value="提交表单" />
</form>
<script type="text/javascript">
function checkForm()
{
    //取到表单中各元素
    if(document.form1.username.value == "")
    {
        window.alert("用户名不能为空");
        return false;
    }else if(document.form1.password.value.length == 0)
    {
        window.alert("密码不能为空");
        return false;
    }else
    {
        return true;
    }
}