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

时间：2022-10-31 17:31:03

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;

    }

}

相关文章