history对象:

History 对象包含用户(在浏览器窗口中)访问过的 URL。窗口之间是相互独立的。

<input type="button" onclick="history.forward()">
<input type="button" onclick="history.back()">
<input type="button" onclick="history.go()">

location对象:

DOM对象:

(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。

HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。

HTML 文档中的所有内容都是节点(NODE):

  • 整个文档是一个文档节点(document对象)
  • 每个 HTML 元素是元素节点(element 对象)
  • HTML 元素内的文本是文本节点(text对象)
  • 每个 HTML 属性是属性节点(attribute对象)
  • 注释是注释节点(comment对象)

节点(自身)属性:

  • attributes - 节点(元素)的属性节点
  • nodeType – 节点类型
  • nodeValue – 节点值
  • nodeName – 节点名称
  • innerHTML - 节点(元素)的文本值
<div id="div1">this is div</div>

<script>
var node = document.getElementById("div1");
console.log(node.attributes);
console.log(node.nodeType); //
console.log(node.nodeValue); //null
console.log(node.nodeName); //DIV
console.log(node.innerHTML); //this is div
</script>

导航属性:

  • parentNode - 节点(元素)的父节点 (推荐)
  • firstChild – 节点下第一个子元素
  • lastChild – 节点下最后一个子元素
  • childNodes - 节点(元素)的子节点
<div class="div1">
<div class="div2"></div>
<p></p>
</div> <script>
var div2=document.getElementsByClassName("div2")[0];
console.log(div2.nextSibling.nodeName) //text,为什么不是P
</script>

由于此种导航方式是节点导航,而空格或换行也文本节点,所以这个导航中包括文本节点,而这些换行或文本节点并不是我们想要的,所以除了parentNode导航属性外,其它的属性用处不大。

推荐导航属性:

parentElement  // 父节点标签元素
children   // 所有子标签
firstElementChild    // 第一个子标签元素
lastElementChild    // 最后一个子标签元素
nextElementtSibling   // 下一个兄弟标签元素
previousElementSibling   // 上一个兄弟标签元素

查找节点可以通过两种方式:一种是全局查找(页面查找)、第二种是局部查找

全局查找就是通过以下4种方法在整个页面查找:

  • 通过使用 getElementById() 方法
  • 通过使用 getElementsByTagName() 方法  //标签名称,如div、p等
  • 通过使用 getElementsByClassName() 方法
  • 通过使用 getElementsByName() 方法   //属性名称

局部查找就是在某个标签下查找:先通过全局查找找到某个标签对象,然后用这个标签对象调用下面方法。

  • 通过使用 getElementsByTagName() 方法
  • 通过使用 getElementsByClassName() 方法

因为id全局唯一,没必要进行局部查找,而Name这种方法,语法不支持。

注意:查找是方法,导航是属性!

Html DOM Event

下面是一个属性列表,这些属性可插入 HTML 标签来定义事件动作。

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 //练习:输入框
onblur 元素失去焦点。 应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景:通常用于表单元素,当元素内容被改变时触发.(三级联动) onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开 onselect 文本被选中。
onsubmit 确认按钮被点击。

给元素添加事件属性的两种方法:一种是在标签里面直接加,另一种是在script里面通过属性来加。

<div onclick="func1()">第一种方式!</div>
<p id="abc">第二种方式!</p> <script>
function func1() {
alert(123);
} var ele = document.getElementById("abc");
ele.onclick=function () {
alert("你真行!");
}
</script>

利用Javascript中的DOM进行增删改查:

<script type="text/javascript">
//在第一个div中动态增加一个a标签. 该a标签点击之后跳转到百度首页.
function addNode(){
//1.获得 第一个div
var div = document.getElementById("div_1");
//2.创建a标签 createElement==>创建一个a标签 <a></a>
var eleA = document.createElement("a");
//3.为a标签添加属性 <a href="http://www.baidu.com"></a>
eleA.setAttribute("href", "http://www.baidu.com");
//4.为a标签添加内容 <a href="http://www.baidu.com">百度</a>
eleA.innerHTML = "百度";
//5.将a标签添加到div中
div.appendChild(eleA);
}
//点击后 删除div区域2
function deleteNode(){
//1 获得要删除的div区域
var div = document.getElementById("div_2");
//2.获得父亲
var parent = div.parentNode;
//3 由父亲操刀
parent.removeChild(div);
}
//点击后 替换div区域3 为一个美女
function updateNode(){
//1 获得要替换的div区域3
var div = document.getElementById("div_3");
//2创建img标签对象 <img />
var img = document.createElement("img");
//3添加属性 <img src="001.jpg" />
img.setAttribute("src", "001.JPG");
//4.获得父节点
var parent = div.parentNode;
//5.替换
parent.replaceChild(img, div);
}
//点击后 将div区域4 克隆一份 添加到页面底部 function copyNode(){
//1.获取要克隆的div
var div = document.getElementById("div_4");
//2.克隆 参数为true 那么克隆时克隆所有子元素. false 只克隆自己
var div_copy = div.cloneNode(true);
//3.获得父亲
var parent = div.parentNode;
//4.添加
parent.appendChild(div_copy);
} </script>

修改HTML DOM:

1、改变html内容:

<script>
var ele=document.getElementById("div1");
var ele1=document.createElement("p"); //通过document的cerateElement创建标签
ele.appendChild(ele1); //对拿到div标签添加子标签
ele1.innerHTML="hello"; //修改html内容,此种方式解释内容中的标签,innerText不解释。
ele1.setAttribute("id","p1"); //括号里面两个参数都是字符串
</script>

2、改变CSS样式:

<body>
<div id="div1">1223</div> <script>
var ele=document.getElementById("div1");
ele.style.color="red"; //后面加style,然后再加样式
alert(ele.getAttribute("id")); //div1,获取属性值。

3、关于class的属性:

elementNode.classname

elementNode.classlist.add()

elementNode.classlist.remove()

<head>
<style>
.bigger{
font-size: 30px;
color: red;
}
.smaller{
font-size: 10px;
color: yellow;
}
</style>
</head>
<body>
<div id="div1">这是一个文本;这是一个文本;这是一个文本;这是一个文本;</div>
<input type="button" onclick="change('bigger')" value="变大"> //此处onclick为调用函数,并非定义函数,所以不用function关键字
<input type="button" onclick="change('smaller')" value="变小"> <script>
function change(a) {
var ele=document.getElementById("div1");
ele.classList.add(a); //因为add后面括号中加的是字符串,所以上面的函数括号中参数也要传字符串,由于双引产生混淆,所以用单引
}
</script>

Python:Day46 Javascript DOM的更多相关文章

  1. Python:Day44 Javascript

    一个完整的Javascript实现是由三个不同的部分组成: 1.核心 ECMA Javascript 2.浏览器对象模型(DOM) document object model (整合JS.html.C ...

  2. Python:Day45 Javascript的String字符串

    typeof只能判断普通数据类型, 对于复杂的只是判断出来是一个Object: instanceof 可以判断数据是否是某一类型: alert(s instanceof String); String ...

  3. JavaScript DOM实战:创建和克隆元素

    DOM来创建和克隆元素. createElement()和createTextNode() createElement()和createTextNode()做的事情正如它们的名字所说的那样.最常见的J ...

  4. Python 15 html 基础 - CSS &javascript &DOM

    本节内容 CSS基础 javascript基础 DOM 前言,这边这块楼主已经很熟悉了,CSS天天用到,简单的一些javascript也是所以就挑点重点说了.然后就是dom不怎么用,但是其实也用不到, ...

  5. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  6. JavaScript DOM编程艺术第一章:JavaScript简史

    本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...

  7. 前端基础:JavaScript DOM对象

    JavaScript DOM对象 通过HTML DOM,可以访问JavaScript HTML文档的所有元素. 一.HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(D ...

  8. Python-Day15 JavaScript/DOM

    JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. ...

  9. 【Python全栈-JavaScript】JavaScript入门

    JavaScript基础知识点 一.JavaScript概述 参考:http://www.w3school.com.cn/b.asp JavaScript的历史 1.1992年Nombas开发出C-m ...

随机推荐

  1. C# AESCBC256 与 java AESCBC256 加解密

    和某上市公司对接接口,他们试用 java AES CBC PKCS5 256 加解密.网上C# 基本不合适. 注意:C# PKCS7 对应 java PKCS5 /// <summary> ...

  2. js 处理金额各个位数上的值

    //金额处理 var number = 1234567.35; if (parseInt(number) == number) { var money = number.toString().spli ...

  3. CSS字体样式属性

    font-size 字号大小 一般推荐使用相对长度(px ,em),不推荐使用绝对长度(in,cmm,mm,pt) font-family 字体 1.可以同时指定多个字体,中间用英文状态的逗号隔开,英 ...

  4. leaflet 如何绘制圆

    方法1(根据指定的半径和中心点去绘制圆) var polygon1 = new L.Circle([34, 108], 120000, { color: 'red', //颜色 fillColor: ...

  5. Android Studio 之 注释模板

    我们看有的项目的文档,会发现它的注释写的很好看,很规范. 而如果你的代码注释还是在用简单的 // 或者 /**/  ,那就学习一下在Android Studio中如何进行注释模板的设置 首先看下面代码 ...

  6. Android--底部导航栏的动态替换方案

    1.通常来说,一般情况下,我们的app的BottomTab会有集中实现方式. 自定义view,然后自己写逻辑去实现互斥. 自由度最高,因为啥都是自己写的. 使用RadioGroup+RadioButt ...

  7. WiFi的名词缩写

    http://blog.csdn.net/jayxujia123/article/details/12842295 无线网络最初采用的安全机制是WEP(有线等效私密),但是后来发现WEP是很不安全的, ...

  8. javascript:面向对象和常见内置对象及操作

    本文内容: 面向对象 常见内置对象及操作 首发日期:2018-05-11 面向对象: JavaScript 是面向对象的编程语言 (OOP).OOP 语言使我们有能力定义自己的对象和变量类型. 对象是 ...

  9. hadoop,spark,Zookeeper,,, 这些名字都是怎么来的呢?

    Apache 首先我们要明白,Apache 是一个 http 服务器,而我们熟悉的另一种说法"Apache Hadoop"中的 Apache 则指的是 Apache 软件基金会.& ...

  10. Nosql数据库分类

    一.KV存储 包括:Redis,Memcached 特点:使用key快速查到其value,Memcached支持string类型的value,Redis除string类型外还支持set,hash,so ...