JavaScript_原型

原型

JavaScript 是一种基于原型的脚本语言，它通过原型可以实现一种伪继承。JavaScript对象都有一个叫做原型的公共属性，默认名称为[[Prototype]]，浏览器实现的名称 __proto__ ，这个属性值实际上就是构造函数的原型对象prototype，通过这个原型属性就是可以访问原型随想所有的属性和方法。

原型对象也有自己的__proto__ ，层层向上知道一个对象的原型对象为null，这一层层原型就是所谓的原型链

function Person(){
    
    
this.username="zhangsan";
this.show=function(){
    
    
return this.username;
}
}
var p1=new Person();
console.log(p1);
// p1.__proto__===Person.prototype

1、prototype原型是构造函数中的一个属性，指向构造函数的原型对象，原型对象用于实现共享属性和
方法

p1.__proto__===Person.prototype

2、 __proto__ 是对象中的一个属性，执行构造函数的原型对象，在ES5中被称为[[prototype]]，并且没有标准的访问方式， __proto__ 是浏览器所执行的属性

3、原型对象中有一个属性constructor，这个属性指向该原型对象的构造函数

原型是用于保存对象的共享属性和方法的，原型的属性和方法并不会影响函数本身的属性和方法

function Person(name){
    
    
this.username=name; //构造函数中定义的属性,公共实例属性
this.show=function(){
    
     //公共实例成员方法
alert(this.username);
}
}
var p1=new Person("张三");
var p2=new Person("李四");
//p1和p2中的成员方法show应该没有必要各自独立持有，因为处理逻辑一致，但是具体实现并不是这样
的
document.write(p1.show==p2.show); //false

如果在构造函数中定义成员方法，则各个对象独立持有，并不共享，所以通常并不建议直接定义成员函数，而是监视使用prototype属性进行定义。为JavaScript类的prototype属性增加函数、属性时，可以看作对原来类的扩展，这就是JavaScript提供的伪继承机制

function Person(){
    
    }
Person.prototype.username="";
Person.prototype.show=function(){
    
    
alert(this.username);
}
var p1=new Person();
var p2=new Person();
document.write(p1.show==p2.show);//true

使用构造函数的prototype属性可以为一个类动态地添加属性和方法，这种伪继承的实质就是修改了原来的类，并不是产生一个新的子类

原型对象

创建的每个函数都会有一个prototype原型属性，这个属性就是一个指针，指向函数的原型对象

• 默认情况下所有的原型对象都自动获取一个constructor属性，这个属性是一个指向prototype属性
  所在函数的指针
• 当调用构造函数创建一个新实例后，该实例的内部包含一个指针，内部属性 __proto__ 指向构造
  函数的原型对象

function Person(){
    
    }

Person.prototype.name="NiCholas";
Person.prototype.age=29;
Person.prototype.job="Software Engineer";
Person.prototype.sayName=function(){
    
    
return this.name;
}
var person1=new Person();
var person2=new Person();
console.log(person1.__proto__===Person.prototype);//true
console.log(person1.sayName===person2.sayName);

当代码读取某个对象的某个属性时，都会执行一遍搜索，目标时具有给定名称的属性，搜索首先从对象实例开始，如果在实例对象中找到该属性则直接返回；如果没有则查找prototype，如果还是没有则继续递归prototype的原型对象，直到找到为止；如果递归到Object仍然没有则返回操作。

__proto__ 和prototype属性的区别

• prototype时原型对象中专有的属性； proto 是普通对象的隐式属性，在new时会指向
  prototype所指向的对象
• __proto__ 实际上是某个实体对象的属性，而prototype则是属于构造函数的属性。
• __proto__ 只能在学习或者调试的环境下使用

JSON

JSON是一种轻量级的数据交换格式。它基于 ECMAScript的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

JSON是一个序列化的对象或数组。

JSON对象

对象由花括号括起来的逗号分割的成员构成，成员是字符串键和上文所述的值由逗号分割的键值对组
成，定义对象的语法{属性名称：值,....}，如 {"name": "John Doe", "age": 18, "address": {"country" : "china", "zip-code": "10000"}}

JSON数组

数组是由方括号括起来的一组值构成，如 [3, 1, 4, 1, 5, 9, 2, 6]

其他数组

• 字符串是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。一个字符（character）即一个单独的字符串（character string）
• 数字没有特殊要求，直接使用字面量。

JSON和JS对象互传

JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串

• 要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法： var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: ‘Hello’, b: ‘World’}
• 要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法： var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 ‘{“a”: “Hello”, “b”: “World”}’

创建对象的9种方法

对象字面量方式、工厂模式、构造函数模式、原型模式、组合使用构造函数和原型模式、动态原型模
式、寄生构造函数模式、稳妥构造函数模式

对象字面量方式

对象字面量方式简单方便，是创建自定义对象的首选

var p={
    
    
"name":"zhangsan",
"age":18,
"sayName":function(){
    
    
alert(this.name);
}
};

但是使用同一个接口创建很多对象则会产生大量重复代码

工厂模式

可以接收创建相关参数，可以多次创建，但是没有重复代码

function createPerson(name,age,job){
    
    
var obj=new Object();
obj.name=name;
obj.age=age;
obj.job=job;
obj.sayName=function(){
    
    
alert(this.name);
}
return obj;
}

但是没有解决对象识别问题，也就是不能通过instanceof判断对象的类型

构造函数模式

js中允许创建自定义的构造函数，从而定义对象属性和方法

function Person(name,age,job){
    
    
this.name=name;
this.age=age;
this.job=job;
this.sayName=function(){
    
    
alert(this.name);
}
}

没有显式的创建对象，直接将属性和方法赋值给this对象，没有return语句，具体创建Person对象时必
须使用new运算符

自定义类型，可以识别类型。但是每个方法都要在各个实例上重新创建一次。例如创建两个Person，但是sayName方法不是同一个Function实例。

原型模式

主要是针对构造函数模式的缺点

function Person(){
    
    }
Person.prototype,name="zhangsan";
Person.prototype.age=18;
Person.prototype.job="Teacher";
Person.prototype.sayName=function(){
    
    
alert(this.name);
}

组合构造函数和原型模式

构造函数用于定义实例属性，而原型用于定义方法和共享的属性。最大程度节省内存，同时支持了使用构造函数传递参数。强烈推荐使用

function Person(name,age,job){
    
    
this.name=name;
this.age=age;
this.job=job;
}
Person.prototype={
    
    
constructor:Person,
sayName:function(){
    
    
alert(this.name);
}
}

事件处理机制

在html页面中可以为DOM对象或者html元素绑定事件处理函数，当这些DOM对象或者html元素上发生
某个动作是，这些事件处理函数就会被触发，从而获取指定机会

• 事件就是浏览器响应用户交互操作的一种机制，javascript 事件处理机制可以改变浏览器响应用户
  操作的方式，用于开发具有交互性，并易于使用的网页
• 浏览器为了响应某个事件进行的处理过程就称为事件处理。事件处理过程可以是简单到一句话，也可以是调用某一段代码处理逻辑

事件

事件可以分为3大类：

• 引起页面之间跳转的事件，主要是超链接事件
• 浏览器自己引发的事件
• 在表单内部和界面进行交互的事件

按照事件源可以分为4大类：

• 鼠标事件，用于使用鼠标操作页面是对应的事件。例如click点击、dblclick双击、mousedown、
  mouseout、mouseover、mouseup等
• 键盘事件：用于使用键盘输入信息是触发的事件。例如keydown按下键、keypress和keyup
• html事件：在操作html节点相关的事件。例如window的onload和onunload，input输入框的
  select、change
• 其它事件：页面中一些特殊对象运行过程中产生的事件。例如异步核心操作XmlHttpRequest对象
  相关的事件

注册事件方法

常见的注册事件有三种方式：行内式绑定元素属性、onXxx内嵌式定义DOM对象属性、内嵌式
addEventListener事件绑定

行内式绑定元素属性

<div id="box" style="width:100px; height:100px"></div>
<input type="button" value="更改颜色" onclick="ff()"/> 通过onclik绑定对应的事件处
理函数ff
<script>
var box=document.getElementById("box");
function ff(){
    
    
box.style.backgroundColor='#f00';
}
</script>

onXxx内嵌式定义DOM对象属性

<div id="box" style="width:100px; height:100px"></div>
<input type="button" value="更改颜色" id="btn1"/>
<script>
var box=document.getElementById("box");
var btn1=document.getElementById("btn1");
btn1.onclick=function(){
    
    
box.style.backgroundColor='#f00';
}
</script>

内嵌式addEventListener事件绑定

addEventListener(事件类型，处理处理函数，是否使用捕获方式)

• 事件类型名称，注意名称前面没有on，例如不是onclick而是click
• 事件处理函数就是事件的监听者，就是事件产生后回调的具体函数
• 参数3用于设置是否采用捕获方式，true表示捕获、false表示冒泡

<input type="button" value="点击" id="btn1"/>
<script>
var btn1=document.getElementById("btn1");
btn1.addEventListener("click",function(){
    
    alert("say hello!")},false);
// 特殊在于允许绑定多个不同的处理逻辑,两次事件处理函数都会被调用执行，这是区别于on方法
btn1.addEventListener("click",function(){
    
    alert("say hihi!")},false);
</script>

如果需要同时允许去除对应的事件处理

var clickHandler=function(){
    
    alert('hi');}
//使用内嵌式事件处理
btn.addEventListener("click",clickHandler,false);
//移除事件处理
btn.removeEventListener("click",clickHandler,false);

事件传播机制

默认事件和定制事件的执行顺序：在捕获事件时，将先捕获DOM绑定的自定义事件，再捕获默认事件

<a href="javascript:aa();" onclick="bb()">点击</a>

实际上Javascript有两种事件传递方式：事件冒泡和事件捕获

令人郁闷的问题：
关于事件的传播网景公司和微软公司有不同的理解

• 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事
  件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
• 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的
  最外层的祖先元素的事件，然后在向内传播给后代元素

W3C综合了两个公司的方案，将事件传播分成了三个阶段
1、捕获阶段

• 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事
  件

2、目标阶段

• 事件捕获到目标元素，捕获结束开始在目标元素上触发事件

3、冒泡阶段

• 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

如果希望在捕获阶段就触发事件，可以将addEventListener( )的第三个参数设置为true，一般情况
下不会希望在捕获阶段触发事件，所以这个参数一般都是false

<style type="text/css">
#box1{
    
    
width:300px;
height:300px;
background-color:yellowgreen;
}
#box2{
    
    
width:200px;
height:200px;
background-color:yellow;
}
#box3{
    
    
width:100px;
height:100px;
background-color:red;
}
</style>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>

事件处理过程中包括捕获和冒泡两个阶段，两个阶段的传播顺序：

• 捕获：从最外边父元素节点传递到发生事件的元素节点，就是由外到内
• 冒泡：从发生事件的元素节点传递到最外边的父元素节点，就是由内到外

<script type="text/javascript">
window.onload = function(){
    
    
/*分别为三个diV绑定单击响应函数*/
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
bind(box1,"click",function(){
    
    
alert("box1响应函数");
});
bind(box2,"click",function(){
    
    
alert("box2响应函数");
});
bind(box3,"click",function(){
    
    
alert("box3响应函数");
});
};
function bind(obj , eventStr , callback){
    
    
if(obj.addEventListener){
    
    
obj.addEventListener(eventStr , callback , false); //大部分浏览器兼容的
方式
}else{
    
    
obj.attachEvent("on"+eventStr , function(){
    
    
//在匿名函数中调用回调函数
callback.call(obj);
});
}
}
</script>

将addEventListener()中的第三个参数为true后，单击box3盒子，会先触发box1的事件，然后是box2的
事件，最后是自己的事件，如果设置为false就不会在捕获阶段就触发事件，所以输出结果就是自己的事件，然后是box2的事件，最后是box1的事件。

需要考虑事件传播方式的场景：监听区域重合

• 通过obj.οnclick=function(){}的方式定义，则执行顺序为冒泡的事件传播方式。
• obj.addEventListener(eventStr , callback , false);当用户操作的动作传递给当前控件，响应函数执
  行完成后，还会继续传递给它的父元素，并一直向上传递直到顶层。参数3值为true表示捕获，值
  为false表示冒泡
• 使用冒泡事件传播，在某个动作执行之后阻止后续事件处理 evt.cancelBubble=true;

bind(box2,"click",function(evt){
    
    
evt.cancelBubble=true;//可以阻止事件继续冒泡
alert("box2响应函数");
});

阻止默认事件

针对onclick属性或者DOM上添加onclick属性，如果需要阻止后续操作的化，只需要在需要阻止的位置
上添加一个return false;

<a href="javascript:aa();" onclick="return bb()">点击</a>
<script>
function aa(){
    
    
alert("href默认事件处理");
}
function bb(){
    
    
alert("自定义事件处理");
return false;
}
</script>

针对addEventList绑定的事件，可以使用event.preventDefault()方法阻止默认事件处理

BOM

BOM就是浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，主要用于管理窗口与窗口之间的通信，核心对象是window。但是缺乏标准。事实上BOM也包含了DOM

• BOM由一些列相关的对象构成，并且每个对象都提供了一些列的方法与属性
• BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM标准化组织是W3C，BOM最初是
  Netscape浏览器标准的一部分
• BOM分为window、navigator、screen、history、location

由于window是顶层对象，所有浏览器都支持window对象，所有JavaScript全局对象、函数以及全局变
量都自动称为window对象的成员，实际上Html DOM的document也是window对象的属性之一

window对象

window对象是 JavaScript 中的顶级对象，所有定义在全局作用域中的变量、函数都会称为 window 对
象的属性和方法，只是在调用时可以省略window.。例如弹出警告窗口可以使用 window.alert("提示信 息"); ，也可以写成 alert("提示信息");

打开新窗口显示某个URL地址内容：window.open(url地址，target目标窗口，params窗口的配置参数);

关闭窗口 window.close()

<button onclick="ff()">新开窗口</button>
<button onclick="cc()">关闭窗口</button>
<script>
function ff(){
    
    
open('https://www.baidu.com', 'users',
'width=500px,height=500px');//强调一点：这里的显示控制不是css样式
}
function cc(){
    
    
close();
}
</script>

• width和height用于设置新开窗口的宽度和高度，最小值100
• top和left用于设置新开窗口针对屏幕左上角的坐标值
• location=yes或者no、1或者0，用于设置是否可以操作地址栏，默认值为yes
• 另外还有menubar菜单栏、resizable可调整窗口大小、scrollbars滚动条、status状态栏，…

其它常见方法

• alert警告窗口、confirm确认窗口、prompt可以输入数据的对话框
• setInterval/clearInterval和setTimeout/clearTimeout用于实现定时器

function ff1(){
    
     //定时器需要调用的方法
open('https://www.baidu.com','baidu','width=500px,height=500px');
}
var timer=null;
function ff2(){
    
    
timer=setTimeout(ff1,1000);//1000ms后自动执行ff1函数
}
function ff3(){
    
    
clearTimeout(timer); //阻止定时执行
}
<button onclick="ff2()">一次性计时器</button>
<button onclick="ff3()">关闭一次性计时器</button>

history对象

history对象用于访问浏览器的历史记录。方法back/forward/go用于加载浏览器历史列表中的某个语句
页面

<button onclick="bb()">回退操作</button>
<button onclick="ff()">前进操作</button>
<input id="num"><button onclick="gg()">多步操作</button>
<script>
function bb(){
    
    
history.back(); //返回上一个页面
}
function ff(){
    
    
history.forwar(); //前进一个页面
}
function gg(){
    
    
var num=parseInt(document.getElementById("num1").value);
history.go(num);
}
</script>

location对象

location对象用于访问浏览器的地址栏。主要属性为href用于读取当前的访问的地址或者修改href值跳转到新地址

<button onclick="ff()">获取当前url地址</button>
<script>
function ff(){
    
    
console.log(location.href); //获取当前地址栏中的url地址值
//设置地址栏的url地址实现页面跳转
location.href="https://www.baidu.com";
//重新加载当前页面,刷新显示
location.reload(); //会导致显示原始页面，控制台上不能正常输出显示
}
</script>

DOM

DOM文档对象模型时W3C组织推荐的处理可扩展标记语言的标准编程接口，在html中其核心对象是
document。可以借助这个编程接口实现访问、修改DOM树中的节点，也可以新增、删除DOM树种的节点。如果在程序种修改html文档对应的DOM树，结构化文档也会随之动态改变

浏览器加载原理

浏览器按照从上向下的顺序下载html文档，一边下载一边加载到内存种，不是全部下载后才加载到内存种。另外DOM树架构的绘制优先于关联元素的加载

浏览器执行 Javascript 脚本

• 载入后立即执行
• 执行时会阻塞页面的后续加载，包括页面的渲染显示、其它资源的下载

浏览器加载html文档时如果遇到 <script> 标签就会暂停后面元素的加载，先对 JavaScript 脚本文件进
行解析和执行

DOM树

当浏览器加载html文档时，首先是DOM树结构的计算，就是计算出DOM树结构，实际上就是把页面种
的html标签像树状架构一样，分析出相互之间的层级关系

DOM树就是用于描述标签之间关系，只要知道任何一个标签，就可以依据DOM种提供的属性和方法进
行操作DOM模型种4个最基本的元素：Node节点、Document文档、Element和HTMLElement，并不直接对应于html页面控件，但是它们所包含的方法也可以供其它页面元素进行调用

• Document接口是针对html文档进行操作的入口，是Node接口继承来的
• Node接口是其它大多数接口的父接口，例如Document、Element、Attribute、Text等接口都是
  从Node接口继承而来的
• NodeList接口是一个节点的集合，包含某个节点种的所有子节点
• NamedNodeMap接口也是一个节点的集合，通过这个接口可以建立节点名称和节点之间的一一映
  射关系，从而利用节点名称可以直接访问特定的节点

DOM操作

通过html dom，整个DOM树种的所有节点都可以通过 javascript 进行访问，可以修改、创建、删除等
操作

节点树种各个节点拥有层级关系，父parent、子child和兄弟sibling可以用于描述层级关系。在节点树种顶端的节点称为根节点root，每个节点除了根节点，都由父节点，一个节点可以有任意数量的子节点；同胞节点是拥有相同父节点的节点

<ul id="u1">
<li>我是第一个li标签</li>
<li>我是第二个li标签</li>
<li>我是第三个li标签</li>
<li>我是第四个li标签</li>
</ul>
<input type="button" value="插入新的li子标签" id="btn">
<script>
var ul=document.getElementById("u1");
var btn=document.getElementById("btn");
//添加事件
btn.onclick=function(){
    
     //使用DOM对象属性的方式添加一个点击事件处理函数
var li=document.createElement("li"); //创建一个<li></li>元素
li.innerHTML="新插入的li标签"; //给<li></li>标签中间添加显示的内容
ul.appendChild(li);//将新创建的li标签添加到ul的子标签种
}
ul.addEventListener("click",function(evt){
    
     //evt就是事件发生后的事件对象，可
以通过事件对象获取事件相关信息，例如事件源
alert(evt.target.innerText); //获取点击的li标签的内容内容
},false); //给ul添加点击事件，false参数表示采用冒泡事件传递方法
</script>

访问html元素

document.getElementById通过元素的id值获取指定的元素对象

<div id="a1"><strong>Java</strong>从入门到放弃</div>
<div id="b1">JavaScript<b>入门</b>基础</div>
<input type="button" onclick="ff()" value="访问元素"/>
<script>
var ff=function(){
    
    
console.log(document.getElementById("a1").innerHTML);
//<strong>Java</strong>从入门到放弃
console.log(document.getElementById("b1").innerText); //JavaScript
入门基础
}
</script>

一个页面中的id值是不能重复的，浏览器规定在一个文档中可以获取这个唯一的id值。如果页面中的id重复了，基于这个方法只能获取到第一个元素，后面的相同id元素则无法获取。

document.getElementsByTagName按标签名称获取一组元素集合，注意这里的标签名称不是标签的
name属性值。实际获取到的是一个类数组，不能直接使用数组中的方法

<body onload="ff()">
<ul>客户端语言
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
</ul>
<ul>服务器端语言
<li>ASP.net</li>
<li>JSP</li>
<li>PHP</li>
</ul>
</body>
获取所有的li标签
<script>
function ff(){
    
    
var liArr=document.getElementsByTagName("li");
alert("元素个数："+liArr.length+"--标签元素名称" + liArr[0].tagName +"获
取li中间的文本内容" + liArr[2].childNodes[0].nodeValue);
}
</script>

liArr[2].childNodes[0].nodeValue表示含义是liArr的第三个li，即

• JavaScript
• ，
  childNodes[0]获取第一个第一个子节点 JavaScript ，然后通过nodeValue才能获取该文本节点中的内
  容，也就是字符串

  document.getElementsByClassName按照元素的class属性值获取一组元素集合

  <body onload="ff()">
  <ul class="bb">客户端语言
  <li>HTML5</li>
  <li class="bb">CSS3</li>
  <li>JavaScript</li>
  </ul>
  <ul>服务器端语言
  <li>ASP.net</li>
  <li class="bb">JSP</li>
  <li>PHP</li>
  </ul>
  <div id="div1"></div>
  </body>
  <script>
  function ff(){
        
        
  var arr=document.getElementsByClassName("bb");
  var div1=document.getElementById("div1");
  var res="";
  for(let kk in arr){
        
        
  console.log(kk);
  res+=(arr[kk]+"<br/>");
  }
  div1.innerHTML=res;
  }
  </script>
  

  document.getElementsByName按照name属性值获取一组节点集合

  <input name="username">
  <button onclick="ff()">获取数据</button>
  <script>
  function ff(){
        
        
  var in1=document.getElementsByName("username")[0];//name允许重复，所以这
  里返回的是一个类集合
  alert(in1.value);
  }
  </script>
  

  querySelector在指定的上下文中基于选择器【类似于css选择器】获取指定的元素对象，获取到的是一
  个元素，哪怕选择器匹配了多个元素，也只能获取一个。一般建议慎用，因为查找效率太低

  <div id="a1">阿斯顿发大水了发</div>
  <textarea id="b1" cols="25" rows="3">阿斯顿联发收到</textarea>
  <input type="button" value="访问2个元素" onclick="ff()"/>
  <script>
  var ff=function(){
        
        
  alert(document.querySelector("#a1").innerHTML + "\n" +
  document.querySelector("#b1").value);
  }
  </script>
  

  querySelectorAll可以返回所有符合css选择器的所有html元素

  <div></div>
  <div></div>
  <div></div>
  <input type="button" onclick="ff()" value="修改全部div元素"/>
  <script>
  function ff(){
        
        
  var divList=document.querySelectorAll("div");
  for(var index in divList){
        
        
  divList[index].innerHTML="测试数据:"+index;
  divList[index].style.width="100px";
  divList[index].style.height="50px";
  divList[index].style.margin="10px";
  divList[index].style.backgroundColor="#ffaa66";
  }
  }
  </script>
  

  节点之间关系

  • parentNode获取父节点，只读
  • previousSibling当前节点的前一个兄弟节点，只读
  • nextSibling当前节点的后一个兄弟节点，只读
  • childNodes当前节点的所有子节点，只读
  • firstChild当前节点的第一个子节点，只读
  • lastChild当前节点的最后一个子节点，只读

  注意：在使用过程中，可能会出现有些浏览器将空白内容当作元素处理

  <body>
  <div id="div1">
  pppppp
  <p>112333</p>
  </div>
  <div>tttttt</div>
  <button onclick="ff()">点击</button>
  <div id="show"></div>
  </body>
  <script>
  function ff(){
        
        
  var arr=document.body.childNodes;
  var res="";
  for(let k=0;k<arr.length;k++){
        
        
  res+=(arr[k].nodeValue+"---"+arr[k].nodeType+"---
  "+arr[k].nodeName+"<br/>");
  }
  document.getElementById("show").innerHTML=res;
  }
  </script>
  

  更多方法的使用

  <body onload="ff()">
  <ul id="u1">
  <li>java</li>
  <li>c++</li>
  <li>PHP</li>
  <li>MySQL</li>
  </ul>
  </body>
  <script>
  function ff(){
        
        
  var u1=document.getElementById("u1");
  var res="";
  if(u1.hasChildNodes()){
        
         //判断u1元素是否有子节点
  var arr=u1.childNodes;
  for(let i=0;i<arr.length;i++){
        
        
  res+=(arr[i].nodeName+"\n");
  }
  alert(res);
  }
  }
  </script>
  

  元素的增删改

  createElement用于创建一个元素标签 var a=document.createElement("div") ，其中方法参数是一
  个合法的标签名，例如 a,html,div 等

  appendChild将一个元素对象插入到指定容器的末尾，原始子元素的位置不变

  <body onload="ff()">
  <p>
  事先添加一行文字，测试appendChild方法添加元素的位置
  </p>
  </body>
  <script>
  function ff(){
        
        
  var p=document.createElement("p");
  var t=document.createTextNode("这是一段文本内容，注意文本内容在DOM树种就是文本节
  点");
  p.appendChild(t);
  document.body.appendChild(p);
  }
  </script>