每个标签都是一个对象

一：查找元素

　　1、直接查找

　　

document.getElementById             根据ID获取一个标签

document.getElementsByName          根据name属性获取标签集合

document.getElementsByClassName     根据class属性获取标签集合

document.getElementsByTagName       根据标签名获取标签集合

　　2、间接查找

parentNode          // 父节点

childNodes          // 所有子节点

firstChild          // 第一个子节点

lastChild           // 最后一个子节点

nextSibling         // 下一个兄弟节点

previousSibling     // 上一个兄弟节点

parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

二：操作元素

　　1、内容

　　　　

innerText   文本

outerText

innerHTML   HTML内容

innerHTML

value       值
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="i1">

        老男孩

        <a>谷<span>歌</span></a>

    </div>

    <input type="text" id="i2" />

    <select id="i3">

        <option value="11">北京1</option>

        <option value="12">北京2</option>

        <option value="13">北京3</option>

    </select>

    <textarea id="i4"></textarea>

</body>

</html>

搜索框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="width: 600px;margin: 0 auto;">

        <input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/>

        <input type="text" placeholder="请输入关键字" />

    </div>

    <script>

        function Focus(){

            var tag = document.getElementById('i1');

            var val = tag.value;

            if(val == "请输入关键字"){

                tag.value = "";

            }

        }

        function Blur(){

            var tag = document.getElementById('i1');

            var val = tag.value;

            if(val.length ==0){

                tag.value = "请输入关键字";

            }

        }

    </script>

</body>

</html>

　　2、属性

　　

attributes                // 获取所有标签属性

setAttribute(key,value)   // 设置标签属性

getAttribute(key)         // 获取指定标签属性

　　增加输入框

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" onclick="AddEle1();" value="+" />

    <input type="button" onclick="AddEle2();" value="+" />

    <div id="i1">

        <p><input type="text" /></p>

    </div>

    <script>

        function AddEle1(){

            // 创建一个标签

            // 将标签添加到i1里面

            var tag = "<p><input type='text'/></p>";

            // 注意：第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'

            document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);

        }

        function AddEle2(){

            // 创建一个标签

            // 将标签添加到i1里面

            var tag = document.createElement('input');

            tag.setAttribute('type', 'text');

            tag.style.fontSize = '16px';

            tag.style.color = 'red';

            var p = document.createElement('p');

            p.appendChild(tag);

            document.getElementById('i1').appendChild(p);

        }

    </script>

</body>

</html>

　　3、class操作

　　

className                // 获取所有类名

classList.remove(cls)    // 删除指定类

classList.add(cls)       // 添加类

　　4、标签操作

　　        1）字符串形式
       　　 2）对象方式
           　　 docment.createElement()

　　例子同上

　　　5、样式操作

　　

##dom-输入框鼠标移动到输入框去除默认值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div style="margin: 0 auto">

        <input id="i1" type="text" value="请输入关键词" onfocus="Focus();" onblur="Blur();"/>

        <!-- 新浏览器直接支持下面方式-->

        <input type="text" placeholder="请输入关键词">

    </div>

    <script>

        function Focus(){

            var tag=document.getElementById("i1")

            var value=tag.value

            if (value=="请输入关键词"){

                tag.value=""

            }

        }

        function Blur(){

            var tag=document.getElementById("i1")

            var value=tag.value

            if (value==""){

                tag.value="请输入关键词"

            }

        }

    </script>

</body>

</html>

　　6、位置操作

　　

总文档高度

document.documentElement.offsetHeight

当前文档占屏幕高度

document.documentElement.clientHeight

自身高度

tag.offsetHeight

距离上级定位高度

tag.offsetTop

父定位标签

tag.offsetParent

滚动高度

tag.scrollTop

/*

    clientHeight -> 可见区域：height + padding

    clientTop    -> border高度

    offsetHeight -> 可见区域：height + padding + border

    offsetTop    -> 上级定位标签的高度

    scrollHeight -> 全文高：height + padding

    scrollTop    -> 滚动高度

    特别的：

        document.documentElement代指文档根节点

*/

　　7、提交表单

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

　　8、其他操作

　　

console.log                 输出框

alert                       弹出框

confirm                     确认框

// URL和刷新

location.href               获取URL

location.href = "url"       重定向

location.reload()           重新加载

// 定时器

setInterval                 多次定时器

clearInterval               清除多次定时器

setTimeout                  单次定时器

clearTimeout                清除单次定时器
##定时器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div id="li"></div>

    <input type="button" value="增加提示" onclick="tip();">

    <script>

        function clear(){

            var tag=document.getElementById("li");

            tag.innerText="";

        }

        function tip(){

            var tag=document.getElementById("li");

            tag.innerText="提示信息";

            setTimeout("clear()",300);

        }

    </script>

</body>

</html>

javascript-dom文档对象模型2的更多相关文章

  1. Javascript - DOM文档对象模型

    文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...

  2. 认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。

    认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...

  3. JavaScript : DOM文档解析详解

    JavaScript DOM  文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...

  4. JavaScript的文档对象模型DOM

    小伙伴们之前我们讲过很多JavaScript的很多知识点,可以点击回顾一下: <JavaScript大厦之JS运算符>: <JavaScript工作原理:内存管理 + 如何处理4个常 ...

  5. xml.dom——文档对象模型API

    文档对象模型,或者“DOM”,是一个跨语言API的World Wide Web Consortium(W3C)来访问和修改XML文档.DOM的实现提供了一个XML文档树结构,或允许客户机代码从头开始建 ...

  6. JavaScript学习笔记7 之DOM文档对象模型

    一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...

  7. JavaScript学习总结（一）DOM文档对象模型

    一.文档(D) 一个网页运行在浏览器中,他就是一个文档对象. 二.对象(O) "对象"是一种自足的数据集合.与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函 ...

  8. JS第二部分--DOM文档对象模型

    一.DOM的概念 二.DOM可以做什么 三.DOM对象的获取 四.事件的介绍 五.DOM节点标签样式属性的操作 六.DOM节点对象对值的操作 七.DOM节点-标签属性的操作(例如id class sr ...

  9. JavaScirpt(JS)——DOM文档对象模型

    一.HTML DOM介绍 HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML). HTML DOM 定义了用于 HT ...

  10. DOM 文档对象模型

    document 对象(作为对象),是 DOM 的核心作用:对内容,属性,样式等操作属性:title:设置/返回当前文档的标题url:返回当前文档的 urlinnerHTML:获取指定对象内的内容bg ...

随机推荐

  1. C语言入门：04.数据类型、常量、变量

    一.数据 1.什么是数据 生活中时时刻刻都在跟数据打交道,比如体重数据.血压数据.股价数据等.在我们使用计算机的过程中,会接触到各种各样的数据,有文档数据.图片数据.视频数据,还有聊QQ时产生的文字数 ...

  2. idea中 读取mybatis的配置文件时候 如果放在文件下面 需要加上路径

  3. linq partition by

    static void Main(string[] args) { var beatles = (new[] { new { id=1 , inst = "guitar" , na ...

  4. 洛谷 P1310 表达式的值 解题报告

    P1310 表达式的值 题目描述 对于1 位二进制变量定义两种运算: 运算的优先级是: 先计算括号内的,再计算括号外的. "× "运算优先于"⊕"运算,即计算表 ...

  5. 【bzoj2754】 SCOI2012—喵星球上的点名

    http://www.lydsy.com/JudgeOnline/problem.php?id=2754 (题目链接) 题意 给出$n$个名字串,$m$个点名串,问对于每一个姓名串,它包含多少个点名串 ...

  6. Python OS模块中的fork方法实现多进程

    import os '''使用OS模块中的fork方式实现多进程''' '''fork方法返回两次,分别在父进程和子进程中返回,子进程中永远返回0,父进程返回的是子进程的is''' if __name ...

  7. BZOJ 4720 [Noip2016]换教室

    4720: [Noip2016]换教室 Description 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程.在可以选择的课程中,有2n节课程安排在n个时间段上.在第i( ...

  8. 异步IO的并发能力：backlog的配置很重要

    今天中午正准备完工的时候,发现一个让人抓狂的问题. 一个精简版的AIO应用理论上应该比一个完整版的AIO应用并发能力高一些(因为完整版的事务处理复杂一些),在同一台机器上测试. 但测试结果显示,精简版 ...

  9. 阿里云ECS使用cloudfs4oss挂载OSS

    cloudfs4oss可以帮我们将OSS直接挂载到ECS上,就像一个目录一样方便访问.使用方法: 1.安装配置环境: yum install libcurl libcurl-devel openssl ...

  10. RESTful记录-RESTful服务

    按照REST架构,一个RESTful Web服务不应该继续服务器的客户端的状态.这种限制被称为无状态.它负责客户以它的上下文传递给服务器,然后服务器可以存储这样的上下文,以处理客户端的进一步请求.例如 ...