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 ...

随机推荐

Python日志模块简单使用
def loginfo(info): # create logger logger = logging.getLogger('[cpu and mem]**********') # Set defau ...
[转帖]Programmer’s guide to the big tech companies 💻
Programmer’s guide to the big tech companies
BroadcastReceiver介绍
参考资料 : 基础总结篇之五:BroadcastReceiver应用详解 BroadcastReceiver用于接收广播信息,可以通过sendBroadcast等方法进行发送.sendBroadcas ...
Hbase之JAVA API不能远程访问问题解决
1.配置Linux的hostname2.配置Linux的hosts,映射ip的hostname的关系3.配置访问windows的hosts 参考文档:http://blog.csdn.net/ty49 ...
一本通1625【例 1】反素数 Antiprime
反素数 Antiprime 题目描述原题来自:POI 2001 如果一个大于等于 1 的正整数 n,满足所有小于 n 且大于等于 1 的所有正整数的约数个数都小于 n 的约数个数,则 n 是一个反素 ...
Semi synchronous replication
目标主库宕机不丢数据(Master Failover without data loss) facebook有两篇不错的文章: 2015/01: performance-issues-and-fix ...
BZOJ1492 货币兑换 CDQ分治优化DP
1492: [NOI2007]货币兑换Cash Time Limit: 5 Sec Memory Limit: 64 MB Description 小Y最近在一家金券交易所工作.该金券交易所只发行交 ...
获取androdmanifest里面的meta-data
/* * Copyright 2017 JessYan * * Licensed under the Apache License, Version 2.0 (the "License&qu ...
获取C++类成员虚函数地址
1.GCC平台 GCC平台获取C++成员虚函数地址可使用如下方法[1]: class Base{ int i; public: virtual void f1(){ cout<<" ...
解题：CF1055F Tree and XOR
题面树上路径是可以通过到根的路径和LCA差出来的,所以建立一棵Trie树按位贪心即可......吗? 发现空间并不够,需要我们每层现建,要记录每个数和它异或答案之后在这一层插进去的编号 #inclu ...

javascript-dom文档对象模型2

一：查找元素

1、直接查找

2、间接查找

二：操作元素

1、内容

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

随机推荐

热门专题

　　1、直接查找

　　2、间接查找

　　1、内容