dom操作
DOM(Document Object Model 文档对象模型)
dom对象实际就是将html标签转换成了一个文档对象,可以通过dom对象中js提供的方法,找到html的各个标签,通过找到标签就可以操作标签使页面动起来,让页面动起来,dom实际上是一种定位方式
使用chrome浏览器,右键检查,在Console里面操作,输入document,点击回车,出来#document,鼠标放到上面整个页面标蓝了,展开#document就是html源码,通过document定位到页面上的任一元素
直接获取标签:
document.getElementById('inner1') # 获取id为inner1的标签,id不能重复
document.getElementsByTagName('div') # 根据标签名称获得标签数组
document.getElementsByClassName('inner') # 根据class属性获取标签数组
document.getElementsByName('username') # 根据name属性获取标签数组
在javascript里var是声明一个局部变量,var tmp = document.getElementById('inner1'),输入tmp回车打印出一个div标签,输入tmp.children,回车打印出一个list,HTMLCollection(2) [span, input],包含两个标签,列表取值tmp.children[1].value = '哈哈哈',就是把placeholder里的值修改了并在文本框里显示
间接获取标签:
var tmp = document.getElementById('inner1')
tmp.parentElement # 父节点标签元素
tmp.children # 所有子标签
tmp.firstElementChild # 第一个子标签元素
tmp.lastElementChild # 最后一个子标签元素
tmp.nextElementSibling # 下一个兄弟标签元素,修改place的值:tmp.nextElementSibling.children[1].value = 'sun'
tmp.previousElementSibling # 上一个兄弟标签元素
文本内容操作:
tmp.innerText # 插入的永远是字符串
tmp.innerText='div' # 更改标签内文本内容
tmp.innerHTML # 插入的是字符串,双引号格式
tmp.innerHTML = '<input type="button" value="提交">' # innerHTML 如果有符合标签规则的字符串,可以将含有HTML代码的字符串变为标签,tmp.innerText做不到
tmp.value # 获取input、textarea参数
tmp.value = '内容' # 对input、textarea的内容进行赋值
select标签:
tmp.value # 获取当前select标签选中的value值
tmp.value = '选项' # 通过赋值可以更改value属性,但是必须是预制的value属性
tmp.selectedIndex # 获取当前select选中的下标
tmp.selectedIndex = '1' # 通过下标更改select的选项
document.getElementsByTagName('select')[0].selectedIndex = '3'
操作样式:
className:字符串形式的class名
var element = document.getElementById('clst')
element打印出<div class="inner" id="clst"></div>
element.className打印出"inner "
element.className = 'inner tmp1'回车可以看到改名成功,打印出"inner tmp1" # 改名,增加默认红色
element.className = 'inner tmp2'回车可以看到改名成功,打印出"inner tmp2" # 改名,增加默认黄色
classList: 列表形式的class名
element.classList回车可以看到DOMTokenList(2) ["inner", "tmp2", value: "inner tmp2"],列表里有两个元素值,分别是inner和inner2
add(): 对列表的样式进行增加
element.classList.add("tmp1")回车没有报错,输入element.classList可以看到增加成功,列表里分别是inner和inner2、inner1
remove(): 对列表的样式进行删除
element.classList.remove('tmp2')回车没有报错,可见删除成功,可以再次删除其他元素
style.xxx: 操作样式的粒度更加细化,操作单个样式属性,相当于在标签中增加一个style属性,在css中样式可以通过-进行连接,在JavaScript中,所有的-都被去掉,-后面的第一个字符大写,如element.style.backgroundColor='green',C是大写的,如element.style.display='none'隐藏输入框
操作属性:
setAttribute(key,value): 设置属性,在标签中添加属性或自定义属性
输入r.setAttribute('placeholder', '请输入XXX'),点击回车,input框里输入了请输入XXX
removeAttribute(key): 删除属性,在标签中删除指定属性
输入var r = document.getElementById('r1')
输入r回车,打印出<input type="text" id="r1" placeholder="请输入XXX">
输入r.removeAttribute('value'),点击回车,把input框里的内容清空
attributes: 获取标签的所有属性
创建标签两种方式:
第一种,通过obj创建
createElement(tagName): 通过DOM创建一个标签对象
appendChild(tagObj): 在父级标签内添加一个子标签对象
var cre = document.getElementById('create') # 根据父标签的id创建一个局部变量
var tag = document.createElement('input') # 通过DOM创建一个标签对象
tag.setAttribute('type','text') # 设置属性,在标签中添加属性或自定义属性
tag.setAttribute('placeholder','用户名') # 设置属性,在标签中添加属性或自定义属性
tag.setAttribute('value','xxx') # 设置属性,在标签中添加属性或自定义属性
cre.appendChild(tag) # 在父级标签内添加一个子标签对象,回车打印出,把鼠标定位到文本框里可以看到下面的子标签对象
第二种,通过字符串创建
insertAdjacentHTML(where, tagStr),参数一接受放到哪里,参数二接受字符串标签
var str = '<input type = "text" value = "字符串添加">' # 定义一个字符串
var tmp = document.getElementById('create1') # 定义一个变量
tmp.insertAdjacentHTML('beforeBegin',str) # 插入到获取到标签的前面
tmp.insertAdjacentHTML('afterBegin',str) # 插入到获取到标签的子标签的前面
tmp.insertAdjacentHTML('beforeEnd',str) # 插入到获取到标签的子标签的后面
tmp.insertAdjacentEHTML('afterEnd',str) # 插入到获取到标签的后面
绑定事件的三种方式:(js的写法就是script标签)
第一种绑定方式:console.log
<input type="button" value="登录" onclick="demo()">
<script>
function demo() {
console.log(12345) # 在浏览器的console里打印出12345,打印一次次数+1
}
</script>
第二种绑定方式:alert
<input type="button" value="登录" onclick="demo()">
<script>
function demo() {
alert('提示框') # 点击登录按钮,在浏览器里弹出一个提示框
}
</script>
第三种绑定方式:confirm
<input type="button" value="登录" onclick="demo()">
<script>
function demo() {
flag = confirm('确定要登录吗?'); # 点击登录按钮,在浏览器里弹出一个确认框,两个按钮
console.log(flag) # 在console里打印出true或false
}
</script>
head和body中写引入js的区别:
如果写在head里,代码从上到下执行,如果js文件比较大会卡在这里,影响用户体验,写在body里,代码从上到下执行,会展示body里的静态文件,当html加载结束,再加载js
一种是在head里引入js文件,另一种是在body里引入js文件,demo.js里的代码如下:
function demo() {
flag = confirm('确定要登录吗?');
console.log(flag)
}
html文件里的代码如下:
<input type="button" value="登录" onclick="demo()">
<script src="demo.js"></script>
打断点的方式,如下
绑定事件的两种方式:
第一种绑定方式,不安全
<input type="button" value="弹出弹框" onclick="click_haha()">
<script>
function click_haha() {
alert('click事件')
}
</script>
第二种绑定方式,相对安全,在线上环境要把代码写到一行里
<input type="button" value="弹出弹框" id="i1">
<script>
var target = document.getElementById('i1'); # target随便定义,必须有这个分号
target.onclick = function () {
alert('点击事件,弹出提示框')
}
</script>
console.log(msg) 打印日志,点击弹出弹框的按钮,就会在控制台里打印出日志,如下图
<input type="button" value="弹出弹框" id="i1">
<script>
var target = document.getElementById('i1');
target.onclick = function () {
console.log('今天是2018年4月23日,星期一')
}
</script>
![](https://images2018.cnblogs.com/blog/1239507/201804/1239507-20180423152658498-1406564617.png)
confirm 确认弹框,返回true or false
<input type="button" value="弹出弹框" id="i1">
<script>
var target = document.getElementById('i1');
target.onclick = function () {
confirm('hello')
}
</script>
location.href # 获取当前的url
location.href = 'http://www.imdsx.cn' # 重定向,输入别的URL就跳转到相应的页面
location.reload() # 刷新