文档对象模型(Document Object Model)是表示和处理一个HTML或XML文档的常用方法

查找

直接查找
var obj = document.getElementById('i1')             // 根据ID获取一个标签
var obj = document.getElementsByName('i1') // 根据Name属性获取标签集合
var obj = document.getElementsByClassName('c1') // 根据Name属性获取标签集合
var obj = document.getElementsByTagName('div') // 根据标签名获取标签集合
间接查找
obj.parentElement           // 父标签元素元素
obj.children // 所有子标签
obj.firstElementChild // 第一个子标签元素
obj.lastElementChild // 最后一个子标签元素
obj.nextElementSibling // 下一个兄弟标签元素
obj.previousElementSibling // 上一个兄弟标签元素

操作

文件内容操作
  • innerText 仅仅获取文本
  • innerHTML 获取全部内容

    示例:
<body>
<div id="i1">Welcome <span>to </span>my site</div>
<script>
var tag_list = document.getElementsByTagName("div"); //返回值为列表
console.log(tag_list[0].innerText);
console.log(tag_list[0].innerHTML);
</script>

执行结果:

Welcome to my site
Welcome <span>to </span>my site
  • value

    • input 获取/改变当前标签中的值
    • select 获取/改变选中的value值
    • textarea 获取/改变当前标签中的值

      输入框示例:
<body>
<input type="text" id="i1" value="请输入内容">
<script>
function Focus(){
if(this.value==="请输入内容"){
this.value = "";
}
}
function Blur(){
if(this.value.length===0){
this.value = "请输入内容";
}
}
var myTag = document.getElementById('i1');
myTag.onfocus = Focus;
myTag.onblur = Blur;
</script>
</body>
样式操作
  • 通过对 class 进行操作来修改样式

    • obj.className(以字符串形式获取对象的class名)
    • obj.classList(以列表形式获取对象的class名)
      • classList.add
      • classList.remove
  • 直接修改/添加 style 中的样式
    • obj.style.fontSize = '16px';
属性操作
obj.attributes              // 获取所有属性
obj.getAttribute('key') // 获取指定key的value
obj.setAttribute('key', 'value') // 修改制定key的value
objremoveAttribute('key') // 移除指定的key
创建标签
- 字符串形式
var tag = '<div></div>';
- 对象的方式
document.createElement('div')

示例:

<body>
<div id="i1">
<p>
<input type="button" onclick="add_ele1()" value="+"/>
<input type="button" onclick="add_ele2()" value="+"/>
</p>
<p>
<input type="text" style="background-color: black"/>
</p>
</div>
<script>
// 通过字符串方式创建新标签
function add_ele1(){
var tag = '<p><input type="text"/></p>';
document.getElementById('i1').insertAdjacentHTML('beforeend',tag);
}
// 通过对象的方式创建新标签
function add_ele2(){ var tag = document.createElement('input'); // 创建一个 input 标签
tag.setAttribute('type','text'); // 设置标签属性
tag.style.backgroundColor='red'; // 设置标签样式
var p = document.createElement('p'); // 创建一个 p 标签
p.appendChild(tag); // 将 tag 标签添加到 p 标签中
document.getElementById('i1').appendChild(p);// 将 p 标签添加到id='i1'的标签中
}
</script>
</body>
提交表单(任何标签通过DOM都可以提交表单)
document.getElementById('form').submit
其他
console.log()	                              //输出框
alert() //弹出框
var v = confirm('提示信息') //确认框(return:v = true/false)
location.href //获取当前URL
location.href = ‘’ //重定向、跳转
location.reload == location.href = location.href //页面刷新
var obj = setInterval(function(){},1000) //设置定时器(单位:ms)
clearInterval(obj) //清除定时器
setTimeout(function(){},1000) //只执行一次的定时器
clearTimeout //清除定时器

事件

绑定事件两种方式:
  • 直接在标签绑定
<input id='i1' type='button' onclick='ClickOn(this)'>
function ClickOn(self){
// self:当前点击的标签
}
  • 先获取DOM对象,然后进行绑定

只能绑定一个

<input id='i1' type='button'>
document.getElementById('i1').onclick = function(){
// this:当前点击的标签
}

可以绑定多个

input id='i1' type='button'>
document.getElementById('i1').addEventListener('click',function(){},false)
document.getElementById('i1').addEventListener('click',function(){},false)
// false:冒泡 true:捕捉 默认为false

关于冒泡、捕捉

onclick点击时

onblur光标移除时

onfocus获取光标时

阻止事件发生

DOM 方式

<a onclick='return Func();'></a>
function Func(){
return false;
}

jQuery方式

词法分析

示例:

function func(age){
console.log(age);
var age = 27
console.log(age);
function age(){}
console.log(age);
}
func(3);

执行结果:

function age(){}

27

27

函数调用前生成AO(active object)

分析顺序:

1.形式参数
2.局部变量
3.函数生成表达式

过程:

1.形式参数
AO.age = undifined
AO.age = 3
2.局部变量
AO.age = undifined(没有执行函数,没有赋值)
3.函数生成表达式
AO.age = function()

DOM 基础的更多相关文章

  1. HTML DOM基础知识

    HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...

  2. Javascript DOM基础(一)概念

    Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  3. jQuery DOM基础

    jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html()  html(value)设置和获取html内容,有html标签会自动 ...

  4. js入门——Dom基础

    DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...

  5. 第一百一十三节,JavaScript文档对象,DOM基础

    JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...

  6. DOM基础(四)

    每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主.在练习的时候,最好能结合着js基础语法的知识点来学习.这样,在学习DOM的时候就不会那么枯 ...

  7. DOM基础(二)

    在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...

  8. BOM基础 计时器 定时器 DOM 基础

    -------------------------------------------滴水穿石,我心永恒. day48 CSSJS 1 ECMA script 2 BOM browser object ...

  9. 第五讲 DOM基础

    DOM基础: 什么是DOM:其实就是dovument,div获取.修改样式等等,但是不只是js的组成部分,而且还是一套规范,规定了这些浏览器怎么处理这些操作: 浏览器支持情况:IE(IE7-8,10% ...

  10. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

随机推荐

  1. js 发送http请求

    // 1.创建 XHR对象(IE6- 为ActiveX对象) // 2.连接及发送请求 // 3.回调处理 function createXMLHttpRequest() {     var xhr; ...

  2. 干货 | SSMS客户端连接京东云RDS SQL Server配置方法

    干货 | SSMS客户端连接京东云RDS SQL Server配置方法 原创: 于振江 京东云开发者社区  微软SQL Server, Oracle数据库以及MySQL系列占据了关系型数据库市场的绝对 ...

  3. Burpsuite安全测试测试指导

    1    Burpsuite简介 Burpsuite是一款安全领域非常重要的Web扫描工具(或者说是平台),它用于攻击Web应用程序.在Burp Suite上集成了各种扫描工具插件,各个集成插件可以组 ...

  4. RabbitMQ中,exchange1绑定exchange2,exchange1和exchange2都绑定queue1,此时消息发送给exchange1,queue1中有几条消息

    如题: 存在两个交换器 exchange1,exchange2 存在一个队列 queue1 存在三个绑定关系:exchange1绑定exchange2 ,exchange1绑定queue1,excha ...

  5. jdbc工具类的封装,以及表单验证数据提交后台

    在之前已经写过了jdbc的工具类,不过最近学习了新的方法,所以在这里重新写一遍,为后面的javaEE做铺垫: 首先我们要了解javaEE项目中,文件构成,新建一个javaEE项目,在项目中,有一个we ...

  6. 深度学习(pytorch)-1.基于简单神经网络的图片自动分类

    这是pytorch官方的一个例子 官方教程地址:http://pytorch.org/tutorials/beginner/blitz/cifar10_tutorial.html#sphx-glr-b ...

  7. Masonry学习札记

    Masnory学习札记 在之前的文章里有草草提到过Masonry自动布局,可这么重要第三方布局框架的怎么可以怎么随便带过呢!昨天在完成页面的时候刚好遇到了被Masorny功能惊叹的部分,所以趁热打铁写 ...

  8. O/R关系的深入理解(转载)

    本文转载自aa8945163: http://aa8945163.iteye.com/blog/859713 什么是O/R Mapping? 广义上,ORM指的是面向对象的对象模型和关系型数据库的数据 ...

  9. Podfile

    platform :ios, "9.0" target "APPName" dopod 'AFNetworking'pod 'SVProgressHUD'pod ...

  10. python pip安装其他模块到中途失败问题

    当网速很差时,pip安装到中途总是出现一大片红色然后失败.而且往往安装下载很久,失败了就要从新开始,失败如下 就是,当你出现这个错误Could not find a version that sati ...