什么是DOM
JavaScript操作网页的接口，全称为“文档对象模型(Document Object Model)。 有这几个概念：文档、元素、节点
整个文档是一个文档节点
每个标签是一个元素节点
包含在元素中的文本是文本节点
元素上的属性是属性节点
文档中的注释是注释节点
DOM树
DOM树是结构，树是由DOM元素和属性节点组成的，DOM的本质是把html结构化成js可以识别的树模型；
有了树模型，就有了层级结构，层级结构是指元素和元素之间的关系父子，兄弟。
dom树如一个倒长的树
js获取DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div id="box">
<div class="item">
<span>span1</span>
<span>span2</span>
<input type="text" name="text" value="我是input"/>
</div>
<div class="item">
</div>
</div>
</body>
<script type="text/javascript">
// 获取html
let html = document.documentElement
console.log(html)
// 获取<body>
let body = document.body
console.log(body)
// 获取样式表
let style = document.styleSheets
console.log(style)
// 通过id获取
let box = document.getElementById('box')
console.log(box)
// 通过clsaa获取dom元素
let item = document.getElementsByClassName('item')[0]
console.log(item)
// 通过标签名获取dom元素
let span1 = document.getElementsByTagName('span')[0]
console.log(span1)
// 通过name属性获取dom元素
let input = document.getElementsByName('text')
console.log(input)
// 通过querySelector获取dom
let box1 = document.querySelector('#box')
console.log(box1)
// 通过querySelectorAll获取dom
let Span = document.querySelectorAll('span')
console.log(Span)
</script>
</html>
简单添加删除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" /><button type="button">添加</button>
<ul>
</ul>
</body>
<script type="text/javascript">
// 获取元素
let btn = document.querySelector('button')
let ul = document.querySelector('ul')
let txt = document.getElementsByTagName('input')[0]
// console.log(txt[0])
// console.log(btn)
btn.onclick = function() {
let value = txt.value
// 创建li
let li = document.createElement('li')
li.innerHTML = `
<li>${value}<buttton class="del" οnclick="del(this)">删除</buttton></li>
`
ul.appendChild(li)
}
// 删除事件
function del(ele) {
ele.parentNode.parentNode.remove();
console.log(ele)
}
</script>
</html>
1320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
