HTML 学习笔记 May 16，2017 dom对象（Document①）
规定 html 文档中 id 号要唯一，如果不唯一，则只识别第一个。
id 不要用数字开头。
getElementsByName 拿到名字一样的集合名
getElementsByTagName // 通过标签名来获取对象（元素）
添加到 body 上面多个超链接
<input type="button" onclick="test1()" value="动态的创建一个超链接" />
function test1() {
// 创建元素
var myElement = document.createElement("a"); // ?? 写希望创建的 html 元素标签名
// 给新的元素添加必要的信息
myElement.href = "http://www.sina.com";
myElement.innerText = "链接到sina";
// 添加到document.body
document.body.appendChild(myElement);
}
添加到 div 上面👇
<input type="button" onclick="test1()" value="动态的创建一个超链接" />
<div id="div1" style="width: 200px; height: 400px;border: 1px solid red;">div1</div>
function test1() {
// 创建元素
var myElement = document.createElement("a"); // ?? 写希望创建的 html 元素标签名
// 给新的元素添加必要的信息
myElement.href = "http://www.sina.com";
myElement.innerText = "链接到sina";
// 这三条是 添加到指定位置 必须加上绝对位置才能起作用,不然就是在后边被挡住了.
//myElement.style.left = "200px";
//myElement.style.top = "300px";
//myElement.style.position = "absolute";
// 添加到document.body
// document.body.appendChild(myElement); // 添加到 body 上面了
// 讲元素添加到 div
document.getElementById("div1").appendChild(myElement);
}
● 删除一个元素
// 删除一个元素
function test2() {
// 删除一个元素
document.getElementById("div1").removeChild(document.getElementById('id1'));
}
// 删除一个元素
function test2() {
// 删除一个元素(删除一个元素是有前提:必须获得其父元素)
document.getElementById("div1").removeChild(document.getElementById('id1'));
// 第二种删除方法 ,根据子元素,先找到父元素
//window.alert(document.getElementById('id1').parentNode.id);
document.getElementById('id1').parentNode.removeChild(document.getElementById('id1'));
}
