JavaScript 基础第八天(DOM第二天)

一、引言

  初步认识DOM有可能会被各种不熟悉的因为因素影响自己的学习心态,你需要的是多去记忆一些单词然后加强自己的代码量。

二、导入

  在昨天初步认识DOM以后我们见天将接着介绍有关于DOM的内容。

三、重点内容

  ① 获得或设置页面的内容(innerText与innerHTML):

    区别:

      a. 在获取页面文本的时候,innerText只获取标签之间的文本信息,不包括其中的的标签。而innerHTML是获取标签之间的所有内容包括标签,而且浏览器会会将获取的内容原样输出。innerHTML是所有浏览器都支持的没有兼容性的问题,而innerText是早期的IE浏览器(IE8之前)浏览器所支持的,火狐浏览器不支持,火狐只支持textContent。(现在的版本都支持了)

      b. 在设置文本的时候,innerText会原样输出,里面即使有标签也渲染不出来,因为发生了转移。innerHTML可以把字符串中的标签按照HTML的标签原样的渲染呈现出来。

  ② 什么是兼容:

    所谓的兼容就是看当前的浏览器是否支持当前对象的属性或者方法,如果支持就是兼容,如果不支持就是不兼容。

  ③ 常见的事件:

    我们昨天介绍了什么叫做事件,那么在DOM中有哪些常见的事件呢?

  

            

    以上就是我们会接触到的一些事件,以及事件的使用说明。(建议找一些练习题自己稍微练习一下)

  ④ 自定义属性:

    在JS中我们不仅可以使用某些标签的固有的属性,我们还可以通过自定义的方式来定义属于我们自己的标签。下面接受集中自定义标签的方式

      a. 可以直接给标签添加属性:

<input type="text" class="ip" id="txt" value="123" aa="456"/>

      b.还可以通过JS来直接设置自定义属性:

var txt = document.getElementById("txt");
    txt.mm = "258";  // 是可以通过 JS来设置自定义属性的

  ⑤ 节点

    1. 在昨天的介绍中我们介绍了什么就是节点,下面我们来深入的介绍一下。

    节点分为三类:标签,属性,文本,而他们分别都有着类型,名字,节点值。

      标签的节点:

      标签的节点类型:  1
        标签的节点名字: 对应的标签名字
      标签的节点值 :  null

     属性节点
           属性的节点类型:  2
         属性的节点名称: 对应的属性名称
       属性的节点值:  对应的属性值

     文本的节点:
         文本的节点类型:  3
         文本的节点名字: #text
         文本节点值:   对应的文本值,如果没有,就是空

     2. 兄弟(姐妹)节点: nextSibling或 nextElementSibling

var li = document.getElementById("li");
console.log(li.nextSibling);  // 下一个紧邻节点,chrome 火狐都支持的,只不过呢,有可能 会获得文本节点,IE8及之前的浏览器会忽略空白文本节点,如果文本有内容,也会获得到
console.log(li.nextElementSibling);// 谷歌和火狐都可以获得下一个紧邻的元素节点,而IE8及之前的版本不支持

     3.上一个紧邻的节点:previousSibling或previousElementSibling

    

onsole.log(li.previousSibling);// 上一个紧邻节点,chrome 火狐都支持的,只不过呢,有可能 会获得文本节点,IE8及之前的浏览器会忽略空白文本节点,如果文本有内容,也会获得到
console.log(li.previousElementSibling);// 谷歌和火狐都可以获得下一个紧邻的元素节点,而IE8及之前的版本不支持

     4.节点的层次

  

四、总结

  今天的内容只要是用于事件,如果可以的话一定要找一些练习题练习。

时间: 2024-12-22 20:52:25

JavaScript 基础第八天(DOM第二天)的相关文章

javascript基础加固6—-DOM

本节 JavaScript 的 DOM 操作,内容主要包括: 通过 ID.名字.标签名 选取元素: 通过 getAttribute 和 setAttribute 获取和设置元素属性: 通过 parentNode 获取父元素.createElement 动态地创建节点.appendChild 和removeChild 动态地添加或者删除节点. 基本概念 2.1.1 什么是 DOM DOM 是 文档对象模型(Document Object Model)的简称,它的基本思想是把结构化文档(比如 HTM

【JavaScript基础知识】——DOM基础

基本概念 DOM即文档对象模型,针对HTML和XML文档的API(应用程序接口).它描绘了一个层次化的节点树,运行开发人员添加.移除和修改页面的某一部分.DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构,也就是表示和处理一个HTML或XML文档的常用方法. D即document,上网查了一下它的英文翻译,最初的意思是记录.所以把它说是文档也是有迹可循的.O即Object,也就是对象,可以理解为类似window对象之类的东西,可以调用属性和方法.M(模型)可以理解为网页文档的树

javascript基础学习系列-DOM盒子模型常用属性

最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下: client系列 clientWidth :width+(padding-left)+(padding-right)->和内容溢出无关系 clientHeight:height+(padding-top)+(padding-bottom)->和内容溢出无关系 clientLeft:左边框的宽度 clientTop:上边框的高度(border[Left/Top]Width) offset系列 offsetParen

JavaScript基础知识(DOM)

获取元素的方法 要操作谁,就要先获取谁: 获取元素 1.document.getElementById:通过ID名来获取元素 兼容性: 在IE8以下,会默认把name属性当做id来获取: document : 文档:上下问必须是document get : 获取 element : 元素 By : 通过 Id : ID名字: id 是唯一的:不能重复 var oBox = document.getElementById("box");// {className:""

JavaScript 基础第七天(DOM的开始)

一.引言 JavaScript的内容分为三个部分,这三个部分分别是ECMAScript.DOM.BOM三个部分组成.所谓ECMAScript就是JavaScript和核心基础语法,DOM是文档对象模型,最后剩下的BOM则是浏览器对象模型.这三个部分相辅相成组成了现在的JavaScript. 二.导入 前面几天我们学习就是有关有ECMAScript即基础语法部分,从今天开始我们将开始接触文档对象模型,做好准备.let's Go! 三.重点内容 ① 什么是DOM: DOM= Document Obj

JavaScript基础--DOM对象加强篇(十四)

1.document 对象 定义:document对象代表的整个html文档,因此可以去访问到文档中的各个对象(元素)document重要的函数 1.1 write 向文档输出文本或js代码 1.2 writeln 向文档输出文本或者js代码,与write不一样的地方是,writeln是换行输出. 比如: document.write("hello");document.writeln("ok"); hello ok 但是对浏览器来看,输出效果没有区别. 1.3 g

JavaScript基础:DOM操作详解

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:文档对象模型,操作网页上的元素的API.比如让盒子移动.变色.轮播图等. BOM:浏览器对象模型,操作浏览器部分功能的API.比如让浏览器自动滚动. 事件 JS是以事件驱动为核心

JavaScript基础--DOM对象(十三):(windows对象:history\location\navigator\screen\event)

DOM编程1.为什么要学习DOM(1) 通过dom编程,我们可以写出各种网页游戏(2)dom编程也是ajax的重要基础2.DOM编程介绍DOM = Document Object Model(文档对象模型)DOM是HTML与XML的应用编程接口(API) BOM和DOM相辅相成的关系BOM为纲,DOM为目,DOM是BOM的具体体现 3.DOM对象 3.1 Windows对象 3.1.1 confirm function test(){ var res= window.confirm("你要删除&

javascript入门书籍推荐《javascript基础教程》

前段时间看javascript高级教程的时候,发现很多基础的javascript概念,自己不懂. 网上搜了一下,看到大家对<javascript基础教程(第8版)>评价不错,买了一本. 作者: (美)Tom Negrino Dori Smith 译者: 陈剑瓯 柳靖 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 翻开看了后,受益匪浅,决定将这本书推荐给javascript的入门童鞋. 这本书的读者,要有一定的HTML基础,因为javascript基本都是对Dom的操作,所以,有一定的HT