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;
    }
}
时间: 2024-10-16 21:24:48

js 节点 document html css 表单节点操作的相关文章

DIV+CSS+JS仿Select下拉表单网页特效源代码下载

DIV+CSS+JS仿Select下拉表单 原文:DIV+CSS+JS仿Select下拉表单网页特效源代码下载 源代码下载地址:http://www.zuidaima.com/share/1550463331830784.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <

用js控制没有名字的表单 进行提交

在BS前台设计中,某些地方提交表单是非常方便的. 但是表单的也是有很多中形式的. 表单的创建形式: 1.用<form></form>进行创建 2.直接设置表单的属性创建一个没有名字的表单 1.对于有名字的表单,可以直接写js事件进行提交 //设置表单提交方式 $('#importMethod').form({ url: "/QuestionType/FuzzyQueryQuestionType", onSubmit: function () { //进行表单验证

js监听input等表单输入框的变化事件oninput

js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变化的,复制粘贴也不能监听到,于是就用到了oninput事件来监听文本框value值的改变.由于是手机端页面没有考虑IE 这货.过去一般都使用onchange/onkeyup/onkeypress/onkeydown实现,但是这存在着一些不好的用户体验.比如onchange事件只在键盘或者鼠标操作改变

Fort.js – 时尚、现代的表单填写进度提示效果

Fort.js 是一款用于时尚.现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单.提供了Default.Gradient.Sections 以及 Flash 四种效果,满足开发的各种场合需要. 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 真是好东西!13种非常动感的页面加载动画效果 你见过吗?9款超炫的复选框(Checkbox)效果 时尚设

Web标准:九、CSS表单设计

Web标准:九.CSS表单设计 知识点: 1.改变文本框和文本域样式 2.用图片美化按钮 3.改变下拉列表样式 4.用label标签提升用户体验 1)改变文本框和文本域样式 文本框标签:<input type="text" value="" class=""> 给这些文本框增加css样式,改变他们的样式: 最终显示效果如下: 文本域标签:<textarea id="" class="" r

【转】document.form.action,表单分向提交

document.form.action,表单分向提交,javascript提交表单 同一个表单可以根据用户的选择,提交给不同的后台处理程序.即,表单的分向提交.如,在编写论坛程序时,如果我们希望实现用户在发送贴子的时候,既发送提交功能又有预览功能时,就会遇到上述问题.即,当用户点击提交按钮时,我们希望表单提交给"提交"处理程序:而当用户点击预览按钮时,我们希望表单提交给"预览"处理程序.那么,如何实现上述功能呢?下面代码可以很好的解决这个问题. <form

待整理笔记(表单序列化操作、多态函数、对象的状态队列管理模式)

1.jquery的表单序列化操作 $('.form').serializeArray();通过serializeArray()方法得到表单form(class=“form”)的dom结点下所有含有name值的节点的value值的一个数组; 这个数组由多个对象构成,每个对象有name和value两个key值. 2.编程的多态性思想 利用函数的参数数组arguments,通过判断数组的长度来选择性执行某个功能: 例如: store: function(namespace, data, remove)

Springboot自带的表单验证操作

在创建Springboot项目中,我们使用了表单验证操作,这一操作将极大地简化我们编程的开发 1.接收数据,以及验证 @PostMapping("/save") public ModelAndView save(@Valid ProductForm productForm, BindingResult bindingResult, Map<String, Object> map) { //1.表单验证 if (bindingResult.hasErrors()) { map

CSS表单属性

一般来说,表单在一个页面中是必不可少的,下面是我对表单的知识总结: 依次要说的是表单元素.表单属性.以及表单提交(js知识) 1,表单元素: <form action="提交的位置 //不写的话会提交给自身" method="如何发送表单数据"></form> form内的元素: 1)datalist(数据列表) 2)keygen(生成加密字符串) 3)output(输出结果) 4)meter(度量器) 2,表单属性:   1)palceho