DOM 基础
文档对象模型(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;
}
词法分析
示例：
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 基础的更多相关文章
- HTML DOM基础知识
HTML DOM基础知识 一.什么是DOM? 1.HTML DOM 定义了访问和操作HTML文档的标准方法. 2.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点树). 3 ...
- Javascript DOM基础（一）概念
Dom基础概念: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...
- jQuery DOM基础
jQuery DOM基础 1.对元素内容的获取和修改: 表单用value(),普通元素用html()和text(). html() html(value)设置和获取html内容,有html标签会自动 ...
- js入门——Dom基础
DOM=DocumentObject Model,文档对象模型. Dom有三个不同的部分. 1.核心DOM 也是最基础的文档结构的标准模型 2.XMLDOM 针对XML文档的标准模型 3.HTML D ...
- 第一百一十三节，JavaScript文档对象，DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
- DOM基础（四）
每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主.在练习的时候,最好能结合着js基础语法的知识点来学习.这样,在学习DOM的时候就不会那么枯 ...
- DOM基础（二）
在我之前写的DOM基础(一)的文章中提到过兼容性的问题,也就是在获取标签间文本信息的时候,早期的火狐版本是不支持innerText的,只支持textContent ,现在的火狐浏览器两者都支持.而IE ...
- BOM基础 计时器 定时器 DOM 基础
-------------------------------------------滴水穿石,我心永恒. day48 CSSJS 1 ECMA script 2 BOM browser object ...
- 第五讲 DOM基础
DOM基础: 什么是DOM:其实就是dovument,div获取.修改样式等等,但是不只是js的组成部分,而且还是一套规范,规定了这些浏览器怎么处理这些操作: 浏览器支持情况:IE(IE7-8,10% ...
- JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
随机推荐
- Java EE设计模式（主要简单介绍工厂模式，适配器模式和模板方法模式）
Java EE设计模式分为三种类型,共23种: 创建型模式:单例模式.抽象工厂模式.建造者模式.工厂模式.原型模式. 结构型模式:适配器模式.桥接模式.装饰模式.组合模式.外观模式.享元模式.代理模式 ...
- bootstrap-fileinput视频上传
在页面编写一个input框: <input id="input-repl-3a" name="videoFileAddress" type="f ...
- Java连接Oracle12c
- 自学python之路（day4）
一 购物车小程序 goods=[{}, {}, {}] shop_car={} li=[] ,len(goods)): li.append(i) money=input('请输入您的总金额:') if ...
- vs2017激活码
Visual Studio 2017(VS2017) 企业版 Enterprise 注册码:NJVYC-BMHX2-G77MM-4XJMR-6Q8QF Visual Studio 2017(VS201 ...
- Python 常见字符串常量和表达式
常见字符串常量和表达式 操作 解释 s = '' 空字符串 s = "spam's" 双引号和单引号相同 S = 's\np\ta\x00m' 转义序列 s = "&qu ...
- 2018-软工机试-D-定西
单点时限: 1.0 sec 内存限制: 256 MB 这么多年你一个人一直在走 方向和天气的节奏会让你忧愁 你说你遇见了一大堆奇怪的人 他们看上去好像都比你开心 ——李志<定西> 这首歌的 ...
- Golang微服务：Micro介绍
官方文档地址 https://micro.mu/docs/index.html Tookit API HTTP接入网关.反向代理或将HTTP转为RPC请求调用后端服务 Web 一个web应用程序,默认 ...
- 代码中设置color的selector
//应该用getColorStateList这种方式 xml中设置时直接color引用就可以了 textView.setTextColor(getResources().getColorStateLi ...
- java方法 throws exception 事务回滚机制
使用spring难免要用到spring的事务管理,要用事务管理又会很自然的选择声明式的事务管理,在spring的文档中说道,spring声明式事务管理默认对非检查型异常和运行时异常进行事务回滚,而对检 ...