`

js初级+DOM

    博客分类:
  • js
阅读更多
1.DOM的结构
  html文档中,所有的事物都是节点,DOM是被视为节点树的HTML。
  整个文档时一个文档节点;每个html元素是元素节点;html元素内的文本是文本节点;
  每个html属性是属性节点;注释是注释节点。

  注解:html元素即为html的标签,如:<a>元素(标签),div元素,input元素,body元素,html等。元素一定是节点,但是节点不一定是元素。文本节点,属性节点不是元素。


  nodeName 属性:
      nodeName 是只读的。
      元素节点的nodeName 与标签名相同
      属性节点的nodeName 与属性名相同
      文本节点的nodeName 始终#text
      文档节点的nodeName始终是#document
      注释:nodeName始终是大写字母

nodeValue属性:
      元素节点的nodeValue是undefined或null
      文本节点的nodeValue是文本本身
      属性节点的nodeValue是属性值



一些常用的 HTML DOM 属性:
innerHTML - 节点(元素)的文本值
parentNode - 节点(元素)的父节点
childNodes - 节点(元素)的子节点
attributes - 节点(元素)的属性节点

一些常用方法
document.getElementById() 返回带有指定 ID 的元素。
document.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
document.getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。(不推荐,有很多浏览器上不兼容)
element.appendChild(newChild) 把新节点追加到自己的孩子节点的最后一个
element.removeChild(oldChild) 删除子节点。
element.replaceChild (newChild, oldChild)替换子节点。
element.insertBefore (newChild, refChild) 在指定的子节点前面插入新的子节点。
document.createAttribute("属性名") 创建属性节点。
document.createElement("div") 创建元素节点。
document.createTextNode("str") 创建文本节点。
element.getAttribute("name") 返回指定的属性值。
element.setAttribute("name","value") 把指定属性设置或修改为指定的值。
element.cloneNode(true);  克隆一个一样的节点

//注:创建属性节点与设置的区别:

createAttribute的使用方法:(多了一个名为good的属性节点  仅建立一个属性节点)
var att=document.createAttribute("good");
att.value="demogood";  //设置属性的值
document.getElementsByTagName("H1")[0].setAttributeNode(att);
而setAttribute建立一个属性,并同时给属性捆绑一个值。(注:setAttribute中的属性可以是任意的,随便设置)




children只返回元素如input, span, script, div等,不会返回TextNode,注释
childNodes只但会返回元素,还会返回TextNode,注释等。




  DOM获取元素的方式:js选择器

  1.form名.表单名.value
  2.document.getElementById("..")
  3.document.getElementsByName("..");
  4.document.getElementsByTagName("...");

  由于类似P、div、span他们没有attribute。意味着
  我们无法获取他们的文本。
  获取文本的方式是:
  1.innerHTML:获取子HTML
  2.innerText:获取文本。

  -------------------------------------
  1.常用的输入框
    模式对话框
     alert
     confirm 确认框,返回true/false
     showModalDialog打开页面

    非模式
     prompt 有返回值
     open 打开新页面

     BOM:document browser history top window
2.事件:
   鼠标:onmouseover onmousemove onmouseup onmousedown
   键盘:onkeypress onkeyup onkeydown
   内存:onload onunload  onfocus onblur
   触摸:ontouch onlongtouch










(1)js:基于对象事件驱动的脚本。脚本必需依赖宿主而存在
  比如:js要寄生在HTML才能存在
除了js还有vbscript,ECMScript等都是属于脚本语言。
   node.js除外。它是基于分布式运算和服务器作为宿主的脚本语言
所有他是唯一不需要HTML作为宿主的新型脚本语言。
普通JS是脚本运行客户端,而NODEJS中的JS是运行于服务器端




(2)js方法名不能重载。因为有arguments存在,重载没有意义


(3)js变量定义
var t="rwr";  //也可以直接写成t="rwr";即缺省写var,因为js是需要通过值来确定类型的,
即,先有值,后有类型,但是代码规范和可读性,建议加上var


var t;  //此时值为undefine,通过typeof 得到元类型为Undefine

document.getElementById('notExistElement'));  //如果不存在改元素,则为null,通过typeof 得到元类型为Object 



(4)--js先得到值,才知道这个变量的类型,体现了动态性

js是动态语言,数组长度如果定义的是3,但是还是可以继续添加数据,即边用数组长度变加。这样非常的灵活,很像java的集合list



(5)函数名首字母大写,则变成类



(6)js循环出来的是序号


(7)parseInt    parseFloat


(8)数组定义的4种方式
    方法1:
    var arr1=new Array(3);//维度是3个
arr1[0]=1;
        arr1[1]=21;
arr1[2]=3;
  
    方法2:
     var  arr2=new Array("小胡","小习","小强");
     arr2[3]=34;
     arr2[4]=342;

    方法3:
     var arr3=[];
arr3[0]=31;
        arr3[1]=321;
arr3[2]=3;

    方法4:
        var  arr4=["小胡","小习","小强"];
arr4[3]=34;
        arr4[4]=342;



(9)对象创建:
    方法1:

       var  o=new Object();
o.stuId=1;
o.stuName='小习';
o.stuAddr="中南海";
        o.sayLove=function(){
     document.write("love u..");
}

  (10)js中类的方法名前置才可以在外部被访问,如:this.sayLove=function(){document.write("love u..");}


(11)js中的私有,公开,特权。


【私有变量】 在对象内部使用'var'关键字来声明,而且它只能被私有函数和特权方法访问。
【私有方法】 在对象的构造函数里声明(或者是通过varfunctionName=function(){...}来定义),
它能被特权方法调用(包括对象的构造方法)和私有方法调用,私有函数只能访问私有的方法和属性。
【特权方法】通过this.methodName=function(){...}来声明而且可能被对象外部的代码调用。
它可以使用:this.特权函数() 方式来调用特权函数,使用 :私有函数()方式来调用私有函数。

【公共属性】 通过this.variableName来定义而且在对象外部是可以读写的。不能被私有函数所调用。
【公共方法】 通过ClassName.prototype.methodName=function(){...}来定义可以从对象外部来调用。
【原型属性】 通过ClassName.prototype.propertyName=someValue 来定义。
【静态属性】 通过ClassName.propertyName=someValue 来定义。
【静态方法】 通过ClassName.funName=function(){...} 来定义。


公开方法与特权方法的比较:相同特点:1都可以在构造函数外部公开访问。2. 都可以访问公有属性
                         不同点:特权方法可以访问私有属性和方法,而公有方法不能。

类的私有变量用var申明,而公开属性用this定义。特权方法用this.methodName=function(){...}来申明


分享到:
评论

相关推荐

    js初级FOR循环 DOm对象 .txt

    主要讲JS初级入门 从不懂到易懂得的过程 其中由for循环 while循环 if else的如何应用知识点 , 字符串的类型 数组创建 对象的概念 DOM对象 以及随机抽人事件 如何获取验证码等简单项目

    JavaScript_DOM编程艺术第二版(中文)

    总的来说,"JavaScript DOM编程艺术第二版"是一本全面介绍JavaScript与DOM结合的实践指南,它将帮助读者从初级到高级,系统地掌握JavaScript在网页动态化中的应用,提升Web开发技能。通过阅读这本书,开发者不仅能...

    javascript初级教程.pdf

    总之,JavaScript初级教程是一份适合初学者的参考资料,涵盖了JavaScript的基础知识,但可能需要读者具备一定的自学能力和实践经验,才能充分利用其内容并掌握这门语言。随着学习的深入,读者可以逐步探索JavaScript...

    Web前端开发初级样题一理+实.zip

    3. 编写JavaScript代码,实现DOM操作、事件处理、表单验证等。 4. 实践响应式设计,运用媒体查询调整不同设备下的显示效果。 5. 将项目托管到GitHub或其他版本控制系统,进行版本管理和协作。 6. 使用浏览器开发者...

    HTML+JS+CSS 初级教学

    5. **DOM 操作**:通过 Document Object Model (DOM),JavaScript 可以修改 HTML 结构,如获取元素 (`getElementById`、`querySelector` 等)、改变元素内容或样式。 **CSS 知识点:** 1. **选择器**:CSS 选择器...

    Javascript基础+提高

    "Javascript基础+提高"的主题涵盖了从初级到进阶的全方位学习路径,旨在帮助初学者建立坚实的语法基础,并进一步提升技能。 基础部分: 1. **变量与数据类型**:在JavaScript中,变量可以动态地声明和赋值,数据...

    javascript初级教程

    同时,DOM操作和事件处理也是客户端JavaScript开发的关键。随着你对JavaScript的深入,还将接触到异步编程、模块化、ES6及更高版本的新特性,如Promise、async/await、类和模板字符串等。 通过这个初级教程,你将...

    【1+X Web前端开发初级 】样题二(理论+实操).zip

    4. **JavaScript基础**:考生应熟悉变量、数据类型、控制流程(条件语句、循环语句)、函数的使用,以及DOM操作,如获取元素、修改元素内容、监听事件等。了解基本的AJAX概念和使用也是必要的,这涉及到与服务器的...

    JS初级练习之网页换肤

    在JavaScript(JS)初级练习中,网页换肤是一项常见的任务,它涉及到用户界面的动态变换,使得用户可以根据个人喜好选择不同的主题或样式。这个练习主要目的是帮助开发者掌握CSS(层叠样式表)布局以及JavaScript的...

    1+x 证书 Web 前端开发初级实操考试.zip

    虽然对于初级实操考试,全面掌握复杂的框架可能不是重点,但理解基本概念如Bootstrap(用于快速构建响应式布局)和jQuery(简化DOM操作和事件处理)会有所帮助。考生应能识别这些工具的使用场景,以及如何引入和应用...

    1+X WEB前端开发初级教案.pdf

    这份教案主要覆盖了Web前端开发初级阶段的核心知识点,包括Web页面制作基础、HTML标签的使用、CSS样式设计、JavaScript编程基础,以及轻量级框架jQuery的应用。下面将详细介绍各个部分的知识点: ### Web前端开发...

    JS初级练习之音乐播放页面

    在本实践项目“JS初级练习之音乐播放页面”中,我们将深入探讨JavaScript这一重要的Web开发语言,特别是关于页面交互和动态功能实现的部分。这个练习旨在帮助初学者更好地掌握JavaScript的基本语法和函数用法,以便...

    js 初级教程txt版

    ### JavaScript初级教程知识点总结 #### 一、JavaScript简介与特性 **标题与描述解析:** - **标题**:“js 初级教程txt版”:表明这是一份针对JavaScript初学者的教程,且以TXT文本格式提供。 - **描述**:“这是...

    javascript初级笔记本第一季

    "javascript初级笔记本第一季"是一份由cssrain总结的JavaScript基础知识讲义,旨在帮助初学者建立起坚实的JavaScript基础。以下是对这份讲义中可能涵盖的知识点的详细解析: 1. **变量与数据类型**:JavaScript是一...

    [JavaScript.DOM编程艺术(第2版)].

    javascript dom 操作神器,初级程序员必备,迅速提高js

    javascript初级代码学习.zip

    002-DOM编程-innerHTML和innerText操作div和span 003-DOM编程-关于正则表达式 004-去除字符串的前后空白trim 005-表单验证 006-复选框的全选和取消全选 007-获取下拉列表选中项的value 008-显示网页时钟 009-内置...

    Web前端--初级样题理+实.rar

    3. JavaScript入门:了解变量、数据类型、条件语句、循环、函数等基础语法,以及DOM操作,如获取元素、改变元素内容和样式。 4. 实战项目:可能包含一些简单的网页制作任务,如创建个人简历网页、模拟电商商品展示...

    P2Javascript初级--讲义.zip

    这个“P2Javascript初级--讲义.zip”压缩包文件包含了针对初学者的JavaScript基础知识,让我们来深入探讨一下JavaScript的核心概念和技术。 1. **变量与数据类型**:在JavaScript中,变量是存储数据的容器。你可以...

    javascript初级笔记第二季

    这个“javascript初级笔记第二季”很显然是一个深入学习JavaScript基础知识的资料集合,由cssrain精心整理,旨在帮助初学者逐步掌握这门语言的核心概念。 在JavaScript的世界里,首先要理解的是它的基础语法,包括...

Global site tag (gtag.js) - Google Analytics