Dom编程

Dom编程

　　Dom是一种用于HTML和XML文档的编程接口，是HTML页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。

1、选择器

document.getElementById('id');    #通过 id 查找 HTML 元素

document.getElementsByClassName('name');  #通过class查找 HTML 元素

document.getElementsByName('name');    #通过name查找 HTML 元素

document.getElementsByTagName('tagname');  #通过标签名查找 HTML 元素

#层级查找

#例：查找 id="a1" 的元素，然后查找 "a1" 中的所有 <p> 元素

var x=document.getElementById("a1");

var y=x.getElementsByTagName("p");

2、改变html内容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <p id="p1">Hello World!</p>

    <img id="image" src="aaa.gif">

<script>

    document.getElementById("p1").innerHTML="zhangsan";//改变了 <p> 元素的内容

    document.getElementById("image").src="bbb.jpg"; //改变<img> 元素的 src 属性

</script>

</body>

</html>

#innerText

#innerHTML

var obj = document.getElementById('p1')

obj.innerText                          # 获取文本内容

obj.innerText = "zhangsan"   # 设置文本内容

obj.innerHTML                       # 获取HTML内容

obj.innerHTML = "<h1>aaa</h1>"      # 设置HTML内容

特殊的标签

　　input系列、textarea标签、select标签，用value获取值

例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <p id="p1">Hello World!</p>

    <input type="text" id="a1">

    <input type="button" value="获取" onclick="get_text()">

<script>

    function get_text(){

        text=document.getElementById("a1");

        alert(text.value);

    }

</script>

</body>

</html>

3、事件

4、创建标签

　　(1)根据对象创建（常用）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="crea"></div>

    <input type="button" value="创建" onclick="create_a();">

<script type="text/javascript">

    function create_a(){

        var obj=document.createElement("a");//创建a标签

        obj.href="http://www.baidu.com";    //添加href

        obj.innerText="百度";              //添加文本

        var crea=document.getElementById("crea");

        crea.appendChild(obj);

    }

</script>

</body>

</html>

　　(2)根据字符串创建

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="crea"></div>

    <input type="button" value="创建" onclick="create_a();">

<script type="text/javascript">

    function create_a(){

        var crea = document.getElementById('crea');

        var obj = "<input  type='text' />";

        // 'beforeBegin', 'afterBegin', 'beforeEnd',  'afterEnd'

        crea.insertAdjacentHTML("beforeBegin",obj);

    }

</script>

</body>

</html>

5、标签属性

　　 var obj = document.getElementById('crea');

#默认存在的属性

    obj.id

    obj.id = "nid"    #修改

    obj.className

    obj.className="zhangsan"    #修改

#自定义的属性

    obj.setAttribute(name,value)    #设置

    obj.getAttribute(name)    #获取

    obj.removeAttribute(name)    #移除

#style

    obj.style.fontSize = "66px";

6、提交表单

#事件提交

document.geElementById('form').submit()

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form id="form1" action="https://www.sogou.com/web" method="get">

        <input name="query" type="text">

        <input type="submit" value="提交">    <!--submit提交-->

        <div onclick="submit();">提交</div> <!-- 事件提交-->

    </form>

<script type="text/javascript">

    function submit(){

        document.getElementById("form1").submit();//事件提交

    }

</script>

</body>

</html>

7、阻止默认行为

　　当标签存在默认行为和事件时，并且事件前加了return时，如 onclick="return sub_msg()" ，如果事件返回的是false，就会阻止标签的默认行为，返回true才

会执行默认行为

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form id="form1" action="https://www.sogou.com/web" method="get">

        <input name="query" type="text">

        <input type="submit" onclick="return sub_msg()" value="提交">    <!--submit提交-->

    </form>

<script type="text/javascript">

    function sub_msg(){

        tt=document.getElementsByName("query")[0];

        if(tt.value.trim()){

            return true;

        }else {

            alert("请输入内容");

            return false;

        }

    }

</script>

</body>

</html>

8、其他

#alert方法，弹出消息对话框

#confirm方法，显示"确定"、"取消"对话框，如果按了【确定】按钮，就返回true，否则就false

window.location.href    #当前地址

window.location.reload()    #刷新

window.location.href = "url"  #跳转

　　定时器

#定时器

obj=setInterval("fun()",2000);   #每2秒执行fun()函数

clearInterval(obj);    #停止定时器

obj1=setTimeout("fun()",2000);   #2秒后只执行一次

clearTimeout(obj1)    #一次没执行时停止

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <label id="label_id">欢迎张三莅临指导</label>

<script type="text/javascript">

    setInterval("func()",1000);//每1秒执行一次函数

    function func(){

        var lable_1=document.getElementById("label_id");

        var lable_text=lable_1.innerText;

        var first_text=lable_text.charAt(0);

        var sub_text=lable_text.substring(1,lable_text.length);

        var result_text=sub_text+first_text;

        lable_1.innerText=result_text;

    }

</script>

</body>

</html>

Dom编程的更多相关文章

JavaScript DOM 编程艺术 ---> JavaScript语法
二. JavaScript语法目录 2.1 语法 javaScript代码要通过HTML/XHTML文档才能执行.可以有两种方式完成这一点,第一种是将JavaScript代码放到文档<head ...
web前端基础——初识HTML DOM编程
1 HTML DOM编程概述文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理HTML的标准编程接口.由于HTML文档被浏览器解析后就是一棵DOM树,要改 ...
《高性能javascript》领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
《高性能javascript》领悟随笔之-------DOM编程篇
<高性能javascript> 领悟随笔之-------DOM编程篇一序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
高性能JavaScript DOM编程
我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用 ...
高性能JavaScript之DOM编程
我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...
高性能javascript学习总结（2）--DOM编程
我们知道,对DOM的操作都是非常的耗性能的,那么为什么会耗性能呢? 文档对象模型(DOM)是一个独立于语言的,使用 XML和 HTML 文档操作的应用程序接口(API).在浏览器中,主要与 ...
高性能javascript学习笔记系列(3) -DOM编程
参考高性能javascript 文档对象模型(DOM)是独立于语言的,用于操作XML和HTML文档的程序接口API,在浏览器中主要通过DOM提供的API与HTML进行交互,浏览器通常会把DOM和ja ...
高性能JavaScript笔记一（加载和执行、数据访问、DOM编程）
写在前面好的书,可能你第一遍并不能领会里面的精魂,当再次细细品评的时候,发现领悟的又是一层新的含义 (这段时间,工作上也不会像从前一样做起来毫不费力,开始有了新的挑战,现在的老大让我既佩服又嫉妒,但 ...
高性能Javascript(2) DOM编程
第三部分 DOM编程文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...

随机推荐

一起来做chrome扩展《基础介绍》
首先说明,chrome的扩展并不它的插件,网上很多说写插件,其实都是说的扩展.写扩展并不复杂,只要根据chrome提供的一系列的API进行就可以实现很多的功能.只是对API的学习是有代价的,加上国内访 ...
angular $scope对象
$scope是一个pojo对象 $scope提供了一些工具方法.例如:$watch() $apply(),一般不会手工去调用 $scope是表达式的执行环境也叫作用域 $scope是一个树形结构,与D ...
Sql Server海量数据插入
目录 1.前言 2.BULK INSERT 3.简单示例前言由于昨天接到一个客户反馈导出数据卡死的问题,于是决定今天模拟一下千万级的数据,然后傻傻的等待插入数据了半天...... 对于海量数据,上 ...
c#实现万年历示例分享万年历农历查询
cs.cs(类页面) using System;using System.Collections.Generic;using System.Linq;using System.Web; namespa ...
SQL CURSOR
SET NOCOUNT ON; DECLARE @vendor_id int, @vendor_name nvarchar(50), @message varchar(80), @produc ...
Selenium2学习-042-Selenium3启动Firefox Version 48.x浏览器（ff 原生 geckodriver 诞生）
今天又被坑了一把,不知谁把 Slave 机的火狐浏览器版本升级为了 48 的版本,导致网页自动化测试脚本无法启动火狐的浏览器,相关的网页自动化脚本全线飘红(可惜不是股票,哈哈哈...),报版本不兼容的 ...
varnish4.1 配置文件default.vcl
varnish4.1 配置文件default.vcl # This .x VCL file vcl 4.0; backend default { .host = "127.0.0.1&quo ...
设计模式学习笔记c++版——单例模式
特别注意单例模式c++实现在main.cpp中引用的时候要去申明下: Singleton * Singleton::m_Instance = NULL; //定义性声明不然会报错:无法解析的外部符号 ...
linux rhel7 dock6.7安装
1. 下载dock6.7 先申请license 在这个网址下载http://dock.compbio.ucsf.edu/Online_Licensing/index.htm 2. tar zxvf * ...
C#、不说再见
公司技术转型,.NET To Java,以后逐渐踏入Java阵营. 再见了 Java嫌弃的老同学,再见了来不及说出的谢谢再见了不会再有的.NET,再见了我留给你毕业册的最后一页我相信我们还 ...

Dom编程

Dom编程的更多相关文章

随机推荐

热门专题