javascript-dom文档对象模型2

每个标签都是一个对象

一：查找元素

　　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的更多相关文章

Javascript - DOM文档对象模型
文档对象模型(DOM) DOM(Document Object Model,文档对象模型)是一个通过和JavaScript进行内容交互的APIJavascript和DOM一般经常作为一个整体,因为Ja ...
认识DOM 文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。元素、属性和文本的树结构（节点树）。
认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面代码 ...
JavaScript : DOM文档解析详解
JavaScript DOM 文档解析 1.节点(node):来源于网络理论,代表网络中的一个连接点.网络是由节点构成的集合 <p title=“a gentle reminder”> ...
JavaScript的文档对象模型DOM
小伙伴们之前我们讲过很多JavaScript的很多知识点,可以点击回顾一下: <JavaScript大厦之JS运算符>: <JavaScript工作原理:内存管理 + 如何处理4个常 ...
xml.dom——文档对象模型API
文档对象模型,或者“DOM”,是一个跨语言API的World Wide Web Consortium(W3C)来访问和修改XML文档.DOM的实现提供了一个XML文档树结构,或允许客户机代码从头开始建 ...
JavaScript学习笔记7 之DOM文档对象模型
一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...
JavaScript学习总结（一）DOM文档对象模型
一.文档(D) 一个网页运行在浏览器中,他就是一个文档对象. 二.对象(O) "对象"是一种自足的数据集合.与某个特定对象相关联的变量被称为这个对象的属性,只能通过某个对象调用的函 ...
JS第二部分--DOM文档对象模型
一.DOM的概念二.DOM可以做什么三.DOM对象的获取四.事件的介绍五.DOM节点标签样式属性的操作六.DOM节点对象对值的操作七.DOM节点-标签属性的操作(例如id class sr ...
JavaScirpt(JS)——DOM文档对象模型
一.HTML DOM介绍 HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML). HTML DOM 定义了用于 HT ...
DOM 文档对象模型
document 对象(作为对象),是 DOM 的核心作用:对内容,属性,样式等操作属性:title:设置/返回当前文档的标题url:返回当前文档的 urlinnerHTML:获取指定对象内的内容bg ...

随机推荐

【转载】Activiti delete process definition by key
http://blog.csdn.net/zwk626542417/article/details/46602419 @RequestMapping(value = "deleteProce ...
[转帖] 一文看懂："边缘计算"究竟是什么？为何潜力无限？
一文看懂:"边缘计算"究竟是什么?为何潜力无限? 转载cnbeta 云计算雾计算边缘计算... 知名创投调研机构CB Insights撰文详述了边缘计算的发展和应用前景 ...
BroadcastReceiver介绍
参考资料 : 基础总结篇之五:BroadcastReceiver应用详解 BroadcastReceiver用于接收广播信息,可以通过sendBroadcast等方法进行发送.sendBroadcas ...
POWERSHELL 计划任务的创建，收集DC中失败的登录信息并邮件通知
(注:本文参考以下前辈文章修改而来,源文章连接:http://itadmindev.blogspot.hk/2011/07/powershell-ad-dc-failed-logins-report. ...
Number Clicker CodeForces - 995E（双向bfs）
双向bfs 注意数很大用map来存然后各种难受....
【题解】 [ZJOI2007]矩阵游戏（二分图匹配）
原题目戳我 Solution: 这个二分图藏还是挺深的,重点在哪里呢?首先我们分析下,交换影响的会是哪里. 每一次交换只会影响某一行上的排列或者某一列上的排列,如果有矩阵是下面这样,就一定不会互相影响 ...
学习Spring Boot：（十六）使用Shiro与JWT 实现认证服务
前言需要把Web应用做成无状态的,即服务器端无状态,就是说服务器端不会存储像会话这种东西,而是每次请求时access_token进行资源访问.这里我们将使用 JWT 1,基于散列的消息认证码,使用一 ...
JDK 目录结构
c:\jdk1.7.0: JDK软件安装根目录.包含版权,许可证和自述文件等. c:\jdk1.7.0\bin: 包含JDK中开发工具的可执行文件(在PATH环境变量中应该包含此目录). c:\jdk ...
C/C++ 类成员函数指针类成员数据指针
普通函数指针: "return_type (*ptr_name)(para_types) " 类成员函数指针: "return_type (class_name::*p ...
Ansible Role
Ansible Role 专题总揽 https://www.jianshu.com/p/1be92c3f65ec lework 关注 2017.03.02 12:57* 字数 629 阅读 1439评 ...

javascript-dom文档对象模型2

一：查找元素

1、直接查找

2、间接查找

二：操作元素

1、内容

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

随机推荐

热门专题

　　1、直接查找

　　2、间接查找

　　1、内容