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.掌 ...
随机推荐
- 机器学习环境搭建-Pycharm
刚刚开始学习机器学习,遇到了很多的问题,尤其是搭建环境让我觉得脑袋特别疼.我用的是win8 64位操作系统,硬盘小的可怜.开始我也跟着下载了anaconda,后来发现anaconda一点儿不像说的那么 ...
- 验证GridControl Gridview 单元格。
一般的验证方法,使用单元格值改变事件.现在记录另一个事件实现验证. 场景:控制当某个单元格的值的长度不能超过10 直接看代码: private void gridViewFileContent_Val ...
- Input禁用文本框
<input type="text" readonly="readonly" /> readonly:只读属性:
- IntelliJ IDEA 使用教程(2019图文版) -- 从入门到上瘾
IntelliJ IDEA 使用教程(2019图文版) -- 从入门到上瘾 前言:IntelliJ IDEA 如果说IntelliJ IDEA是一款现代化智能开发工具的话,Eclipse则称得上是 ...
- CG-ctf WP
week one 1 /x00 提示:有多种解法,你能找到几种 源码: writer up: 题目直接给出了源码,get 到一个 nctf 这个变量,int ereg(string pattern, ...
- RN android真机调试找不到设备
待完成…… 1.adb驱动安装 2.手机设置 3.添加adb_usb.ini文件
- LINUX 学习笔记 账号与群组的管理
LINUX 账号与群组的管理 UID:UserID 保存文件:/etc/passwd GID:GroupID 保存文件:/etc/group /etc/passwd 文件结构 一行代表一个账号,里面还 ...
- mybatics问题记录
一.Parameter 'name' not found. Available parameters are [0, 1, param1, param2]. 传入多个值时,mybatis会自动将这些值 ...
- bind啊你返回的函数到底是个虾米
一般apply().call()和bind()会一起比较. 他们三个都是改变this对象指向的方法. apply()和cal()方法是会立即执行,apply把参数作为数组,call方法接收一个一个的参 ...
- ppt图片在word中不能正常显示，只显示为矩形框的解决方法
word中插入的其他图片是好的,但是从ppt复制粘贴过来的图片只显示个框. 解决方法:以下红框中内容去选中.