每个标签都是一个对象

一：查找元素

　　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. Laravel 从入门到精通系列教程

    转载;https://laravelacademy.org/laravel-tutorial-5_7 适用于 Laravel 5.5.5.6.5.7 版本,本系列教程将围绕一个 LTS 版本,然后采取 ...

  2. 洛谷P3960 列队（NOIP2017）（Splay）

    洛谷题目传送门 最弱的Splay...... 暴力模拟30分(NOIP2017实际得分,因为那时连Splay都不会)...... 发现只是一个点从序列里搬到了另一个位置,其它点的相对位置都没变,可以想 ...

  3. php中的动态变量的一个应用

    原文:https://www.cnblogs.com/JimmyBright/p/9869168.html 某些情况下,可以代替switch语句,大大简化代码,非常有意思哦 $list = [ [ ' ...

  4. SP422 TRANSP2 - Transposing is Even More Fun——置换群+反演

    挺神仙的置换题 SP422 TRANSP2 - Transposing is Even More Fun 这个博客除了开始举例子别的都是对的: https://blog.csdn.net/Braket ...

  5. windows2008设置IIS服务器定时自动重启的方法

    我们在使用windows2008下IIS服务器时会经常出现资源耗尽的现象,运行一段时间下来就会出现访问服务器上的网站时提示数据库连接出错,重启IIS后网站又能正常访问了,这个问题可能困扰了很多站长朋友 ...

  6. vue 新增时清除表单验证注意事项

    // 清除表单校验的提示 if (this.$refs['XXX']) { // 延时执行 this.$nextTick(function () { this.$refs['XXX'].clearVa ...

  7. Linux上查看文件大小的用法（转载）

    具体用法可以参考:https://blog.csdn.net/linfanhehe/article/details/78560887 当磁盘大小超过标准时会有报警提示,这时如果掌握df和du命令是非常 ...

  8. Kafka 0.8 NIO通信机制

    一.Kafka通信机制的整体结构 同时,这也是SEDA多线程模型. 对于broker来说,客户端连接数量有限,不会频繁新建大量连接.因此一个Acceptor thread线程处理新建连接绰绰有余. K ...

  9. JAVA-Servlet内容

    Servlet重定向 HttpServletResponse接口的sendRedirect()方法可以用于将响应重定向到另一个资源,资源可能是servlet,jsp或html文件. 它接受相对和绝对U ...

  10. bzoj千题计划293：bzoj3142: [Hnoi2013]数列

    http://www.lydsy.com/JudgeOnline/problem.php?id=3142 如果已知数列的差分数列a[1]~a[k-1] 那么这种差分方式对答案的贡献为 N-Σ a[i] ...