DOM对象
document
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<div class="">
hello world
</div>
<script type="text/javascript">
// html文档是由一组标签组成的文档,在JavaScript中,html被视为由一系列节点通过层级关系组合在一起,并可以通过javaScript来操作这些节点
// 1.document相关属性
// 2.document相关方法
// 3.dom选择器
/*
在JavaScript中，document对象代表整个网页文档
*/
// <html>
var html = document.documentElement
// <body>
var body = document.body
// <title>
var title = document.title
/*
document.location
// 等价于window.location
document.domain
document.URL
// 等价于location.href
*/
/*
document.write()#字符之间没空格
document.writeIn()#字符之间有空格
*/
for (i in "string"){
document.write("string"[i])
// document.writeln("string"[i])
}
</script>
</body>
</html>
dom选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
</head>
<body>
<a href="./link1.html" name="link1" class="nav" id="a1">link1</a>
<a href="./link2.html" name="link2" class="nav" id="a2">link2</a>
<div class="div1 red" id="div1" name="div1">
<img src="" id="img1" class="thumb" name="img1">
<form action="" method="post" name="form1">
<input type="submit" value="提交" />
</form>
</div>
<div class="div2 red" id="div2" name="div2">
<img src="" id="img2" class="thumb" name="img2">
<form action="" method="post" name="form2">
<input type="text" id="" value="" />
<input type="password" id="" value="" />
<input type="submit" value="提交" />
</form>
</div>
<script type="text/javascript">
// document.getElementById(id)
// document.getElementsByTagName(tagName)
// document.forms
// document.images
// document.links
// document.getElementsByClassName(className)
// document.querySelector(css选择器)
// document.querySelectorAll(css选择器)
// 1.0根据元素标签选择器
div = document.getElementsByTagName("div")
img = document.getElementsByTagName("img")
forms = document.getElementsByTagName("form")
input = document.getElementsByTagName("input")
// 2.0 根据id选择
div1 = document.getElementById("div1")
div2 = document.getElementById("div2")
// 3.0根据class名称
// 3.1返回一组
div1 = document.getElementsByClassName("div1")
redDiv = document.getElementsByClassName("red")
// 4.0根据name属性
username = document.getElementsByName("username")
password = document.getElementsByName("password")
// form,img,link专用选择器
forms = document.forms
console.log(forms['form1'])
console.log(document.form1)
img = document.images
console.log(forms['img1'])
console.log(document.img1)
links = document.links
console.log(links[0])
console.log(links['a1'])
console.log(links['link1'])
// html5支持的选择器
// 5.1 选择单个元素
// document.querySelector(css选择器)
element = document.querySelector(".red")
// id选择器
element = document.querySelector("#div1")
// 选择div1下的img
element = document.querySelector("#div1>img")
// 5.2选择全部元素
// document.querySelectorAll(css选择器)
// 返回NodelList,包含一个forEache历遍方法
element = document.querySelectorAll(".red")
divs = document.querySelectorAll("div")
// querySelectorAll返回的是静态的NodelList
// dom的getElements系列返回的是动态的节点集合HTMLCollection
q_divs = document.querySelectorAll("div")
d_divs = document.getElementsByTagName("div")
console.log(q_divs)
console.log(d_divs)
function addDiv(){
new_div = document.createElement("div")
new_div.className = "red"
new_div.id = "div3"
document.body.appendChild(new_div)
}
addDiv()
console.log(q_divs)
console.log(d_divs)
</script>
</body>
</html>
dom节点创建
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.container{
width: 300px;
height: 300px;
border: 1px solid #FF0000;
}
</style>
</head>
<body>
<div class="">
</div>
<script type="text/javascript">
// document.createElement()创建元素
div = document.createElement("div")
// class 在es6中是定义对象的关键字
div.className = "container"
div.id = "div1"
div.innerHTML = "<b>hello world</b>"
// 使用appendChild将新创建的元素添加到父元素中，比如添加到body元素
document.body.appendChild(div)
// 在新建的div中创建p元素
p = document.createElement("p")
p.innerHTML = "<a href=http://www.python-xp.com>python简介手册</a>"
// 添加到刚才创建的div元素内
div.appendChild(p)
span = document.createElement("span")
span.innerHTML = "登陆"
// (createElement方式导致浏览器重新渲染消耗系统资源，不推荐)
// 在body中创建一个<ul>
ul = document.createElement("ul")
document.body.appendChild(ul)
for (i=0;i<5;i++){
li = document.createElement("li")
li.innerHTML = "news_"+i
ul.appendChild(li)
}
// 推荐
li_str = ""
for (i=0;i<5;i++){
li_str+= "<li>news_"+i+"</li>"
}
ul.innerHTML +=li_str
</script>
</body>
</html>
insertbefore
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>test_1</li>
<li>test_2</li>
<li>test_3</li>
<li>test_4</li>
</ul>
<script type="text/javascript">
ul = document.querySelector("ul")
// insertBefore(newnode,node)
// 在node节点之前插入一个图片节点
img= document.createElement("img")
img.src="E:\sh-scripts\pyproject\myhtml\805.jpg"
document.body.insertBefore(img,ul)
// 在ul的第三个li之前再插入一个新的li，内容为新闻搜索
lis = document.querySelectorAll("li")
new_li = document.createElement("li")
new_li.innerHTML = "新闻插入"
ul.insertBefore(new_li,lis[2])
</script>
</body>
</html>
子节点和兄弟节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>第一个文本节点
<li>test_1</li>
<li>test_2</li>
<!--注释节点<li>test_3</li>-->test_5
<li>test_3</li>test_6
<li>test_4</li>
最后一个节点
</ul>
<script type="text/javascript">
ul = document.querySelector("ul")
lis = document.querySelectorAll("ul>li")
// 子节点
/*childNodes:返回所有节点,包含注释节点,文本节点
children:只返回元素节点
firstchild
lastchild
previousSibling
nextSibling
childElementCount
firstElementChild只返回元素节点中的第一个
lastElementChirld只返回元素节点中的最后一个
previousElementsibling返回元素节点中的前一个兄弟节点
nextElementSibling只返回元素节点中后一个兄弟节点
elementsCount = ul.childElementCount
*/
lis_nodes = ul.childNodes
lis_children = ul.children
console.log(lis_nodes)
console.log(lis_children)
// firstchild
console.log(ul.firstChild.innerHTML)
// lastchild
console.log(ul.lastChild.innerHTML)
</script>
</body>
</html>
删除与修改节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="links_1">links_1</a>
<a href="links_2">links_2</a>
<a href="links_3">links_3</a>
<ul id="ul_1">
<li>test_1</li>
<li>test_2</li>
<!--注释节点<li>test_3</li>-->
<li>test_3</li>
<li>test_4</li>
</ul>
<script type="text/javascript">
// 删除节点
links = document.links
// removeChild:返回被删除的节点,节点还在内存中,可以重新被append到元素中
// deleted_link = document.body.removeChild(links[1])
// document.body.appendChild(deleted_link)
// document.body.insertBefore(deleted_link,links[1])
// remove:没有返回值
// links[0].remove()
ul = document.getElementById("ul_1")
lis = ul.children
// ul.removeChild(lis[0])
// lis[1].remove()
// 替换节点
// li = document.createElement("li")
// li.innerHTML = "hello world"
// ul.replaceChild(li,ul.firstElementChild)
// 移动节点
// 可以对移动节点直接重新插入到新位置
ul.insertBefore(lis[3],lis[2])
// 也可以从文档中先删除，再重新添加到文件档中
move_li = ul.removeChild(ul.firstElementChild)
ul.appendChild(move_li)
// 克隆节点
// 浅拷贝
clone_ul = ul.cloneNode()
document.body.appendChild(clone_ul)
// 深拷贝
// ul.cloneNode(true)
// clone_ul.appendChild(move_li)
</script>
</body>
</h
tml>
浙公网安备 33010602011771号