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()
