1.把文档表示为树
HTML文档的递归形式决定了它的树状拓扑结构,树的节点对应文档中的各种结构。文档的结构主要包括标签、文本和注释。
2.树的节点
- getElementByld()
在HTML中,id是唯一的,也就是说我们可以很方便地找出某个元素。
<p id="test1">测试文字1</p>
<p id="test2">测试文字2</p>
<script>
var test = document.getElementsByTagName("p");
test[0].innerHTML="这个是测试2";
</script>
- getElementsByTagName()
按标签名找
<ul id="mylist">
<li id="m1">标签1</li>
<li id="m2">标签2</li>
<li id="m3">标签3</li>
<li id="m4">标签4</li>
</ul>
<script>
var elems=document.getElementsByTagName("ul");//通过标签名进行访问
console.log(elems);
</script>
- getElementByName()
按名字找
<form id="registerForm">
<input type="checkbox" name="boy">
<input type="checkbox" name="boy">
<input type="checkbox" name="boy">
</form>
<script>
var list = document.getElementsByName("boy")
console.log(list);
</script>
-
getElementClassName()
查找指定的class属性的元素
<div id="news">
<p class="mainTitle">新闻标题1</p>
<p class="subTitle">新闻标题2</p>
<p class="mainTitle">新闻标题3</p>
</div>
<script>
var list = div.getElementsByClassName('mainTitle');
console.log(list);
</script>
- querySelector()
通过CSS选择器查找
var elem = parent.querySelector("selector");
//selector支持一切CSS中选择器
//强调如果选择器匹配的有多个,只返回第一个。
//找多个
var elems = parent.querySelectorAll("selector");
2.常用的DOM操作
- createElement操作
创建一个新的节点
//基本方法:document.createElement(nodeName);
var para = document.createElement("p");//创建一个p元素节点
-
appendChild+createTextNode()
插入新建的节点
<ul id="mylist">
<li>coffee</li>
<li>Tea</li>
</ul>
<p id="demo">单击按钮将项目添加到列表中</p>
<button onclick="m()">点我</button>
<script>
function m(){
var node = document.createElement("li");
var textnode=document.createTextNode("Water");
node.appendChild(textnode);//给li列表加入值
document.getElementById("mylist").appendChild(node);//通过Id来查找。将新的li插入ul中
}
</script>
-
insertBefore()
将一个新元素插入到一个现有元素的前面
<div>
<p class="p1" id="p1">这是段落1</p>
<p class="p2">这是段落2</p>
</div>
<p id="p3">这是段落3</p>
<script>
let div = document.getElementsByTagName("div")[0];
let p2 = document.getElementsByClassName("p2")[0];
let p1 = document.getElementById("p1");
let p3 = document.getElementById("p3");
let returnDom = div = insertBefore(p2,p1);
console.log(returnDom === p2);
</script>
- replaceChild()
替换子节点为其他节点
如果成功该函数则返回被替换的节点,如果失败则返回Null。
node.replaceChild(newnode,oldnode);
<div>
<b id="oldnode">javascript</b>
</div>
<a href="javascript:replaceMessage()">将加粗改为斜体</a>
<script type="text/javascript">
function replaceMessage(){
var oldnode = document.getElementsByTagName("b")[0];
var newnode=document.createElement("i");
newnode.innerHTML="javascript";
oldnode.parentNode.appendChild(newnode);
oldnode.parentNode.replaceChild(newnode,oldnode);
}
</script>
//效果就是将页面一开始的javascript粗体变成javascript斜体(在点击“将粗体改为斜体”链接)
- removeChild()
删除节点,用来删除父节点的一个子节点,注意,当一个节点被删除,那么这个节点包含的所有子节点都将被删除。
<div id="d1">
<div id="thisNode">
点击就可以删除我
</div>
</div>
<script type="text/javascript">
document.getElementById("thisNode").onclick=function(){
this.parentNode.removeChild(this);//先找到此节点的父节点再删除该父元素下的子节点。也就是thisNode节点。
}
</script>
- hasChildNodes()
作用:用来检查一个元素是否有子节点,返回值是true/false。
<div id="div1">
<div id="div2"></div>
</div>
<script>
var div1 = document.getElementById("div1");
var div2=document.getElementById("div2");
var s = div1.hasChildNodes("div1");
var d = div2.hasChildNodes("div2");
alert(s);
alert(d);
</script>//输出结果是true false
- NodeName
节点名称,如果节点是元素节点,返回元素的名称。
如果给定节点是属性节点,NodeName返回属性的名称
如果给定的是文本节点,NodeName返回#text的字符串
<p>段落节点</p>
<div id="div1">元素节点&属性节点</div>
<script>
var div = document.getElementById("div1");
var p = document.getElementsByName("p");
var id = document.getElementsByName("id");
var div1 = document.getElementsByTagName("div");
console.log(div.nodeName);
console.log(p.nodeName);
console.log(id.nodeName);
console.log(div.nodeName==div1.nodeName);
</script>
//输出结果是:DIV(大写)
//#text
//id(小写)
//true.
- nodeType——节点的类型值
返回值是一个整数
元素节点类型 值为1
属性节点类型 值为2
文本节点类型 值为3
<p>段落节点</p>
<div id="div1">元素节点&属性节点</div>
<script>
var div = document.getElementById("div1");
var p = document.getElementsById("p1");
var div1 = document.getElementsByTagName("div");
alert(div.nodeType);
alert(p.nodeType);
</script>
//结果是1 3
- nodeValue——节点的value值
返回给定节点的当前值(字符串)
如果给定节点是属性节点,返回值是这个属性的值
如果给定节点是文本节点,返回值是这个文本节点的内容。
如果给定节点是元素节点,返回值是null。
- getAttribute()
作用:返回一个给定元素的一个给定属性名称的节点的值
- setAttribute()
作用:将给定元素节点添加一个新的属性值或改变它的现有属性的值。
返回值是一个字符串,如果不存在setAttribute()方法将先创建它再为其赋值。
<style>
.a2{
color:red;
font:30px 华文仿宋;
}
</style>
<a href="#">
<p id="p2" onclick="add()">链接2</p>
</a>
<script>
function add(){
var b = document.getElementById("p2");
b.setAttribute('class',"a2");
}
</script>
- removeAttribute()
<style> .a2{ color:red; font:30px 华文仿宋; } </style> <a href="javascript:void(0)" id="a1"><p class="a2" id="p1" onclick="jump()">链接1</p></a> <script> function jump(){ var a = document.getElementById("p1"); a.removeAttribute("class"); } </script>//结果就是当单击链接1字样时红色字样消失,即a2定义的CSS效果失效
- hasAttribute()
判断是否包含指定属性
<div id="div1">
<div id="div2" onclick="">
</div>
</div>
<script>
var div1 = document.getElementById("div1");
var div2=document.getElementById("div2");
var s = div1.hasAttribute("onclick");
var d = div2.hasAttribute("onclick");
alert(s);
alert(d);
</script>//输出结果是false true。