<html> <head> <meta charset="utf-8" /> <title>查找元素</title> </head> <body> <div> <div>对酒当歌,人生几何</div> <div id="zhouqi">日照香炉生紫烟,遥看瀑布挂前川</div> <div>唧唧复唧唧,木兰当户织</div> </div> <div>我寄愁心与明月,随风直到夜郎西</div> </body> <script> var zhouqi = document.getElementById('zhouqi') console.log(zhouqi.innerText) // 获取前面的同胞元素 var prev = zhouqi.previousElementSibling || zhouqi.previousSibling console.log(prev.innerText) // 获取后面的同胞元素 var next = zhouqi.nextElementSibling || zhouqi.nextSibling console.log(next.innerText) // 查找父元素 var parent = zhouqi.parentNode var uncle = parent.nextElementSibling || parent.nextSibling console.log(uncle.innerText) // 获取所有子元素 var children = parent.children console.log(children[0].innerText) // 获取第一个子元素 var first = parent.firstElementChild || parent.firstChild console.log(first.innerText) // 获取最后一个子元素 var last = parent.lastElementChild || parent.lastChild console.log(last.innerText) </script> </html>
<html>
<head>
<meta charset="utf-8" />
<title>创建删除元素</title>
</head>
<body>
<input type="file" /><button>添加</button>
</body>
<script>
var btn = document.getElementsByTagName('button')[0]
btn.onclick = function () {
// 创建一个div元素
var div = document.createElement('div')
// 创建一个input元素
var input = document.createElement('input')
input.type = 'file'
// 将input元素添加到div元素中
div.appendChild(input)
// 创建一个删除按钮
var button = document.createElement('button')
button.innerText = '删除'
// 添加事件
button.onclick = function () {
// 找到父级元素(div)
var parent = this.parentNode
// 找到祖父级元素(body)
var grand = parent.parentNode
// 删除父级元素(div)
grand.removeChild(parent)
}
// 将button元素添加到div元素中
div.appendChild(button)
// 添加元素
btn.parentNode.appendChild(div)
}
</script>
</html>