什么是DOM
DOM是文档对象模型 Document object Model 我们可以通过DOM动态改变文档内容。
动态改变文档内容的原理
解析文档（如HTML）并生成树
通过DOm标准接口+编程语言改变文档内容
怎么操作
获取标签，通过标签的onclick进行函数操作。
访问节点的方法 4个：–
查看/修改属性节点
getAttribute（“属性名”） setAttribute(“属性名”，“属性值”)
创建和增加节点的方法
createElement（）;创建节点
appendChile（）;末尾追加式插入节点
inserBefore（）;在指定节点前插入节点
cloneNode（）;克隆节点
如果编程的时候希望访问某个元素的父元素，但又不知道父元素的id，name，class该怎么办？
可以根据层次关系查找节点
-parentNode
-firstChild
-lastChild
-cells
在使用firstChild和lastChild时我们要注意我们的文本节点都会找到。
我们使用的firstElementChild。。就可以避免上面情况。
chileNode节点 获得所有的节点（也有空格）
children。//所有的元素节点。
层次节点属性
childNodes 获取当前元素节点的所有子节点
firstChild 获取当前元素节点的第一个子节点
lastChild 获取当前元素节点的最后一个子节点
ownDocument 获取该节点的文档根节点，相当与docunmet
parentNode 获取当前节点的父节点
previousSibling 获取当前节点的前一个同一级节点
nextSibling 获取当前节点的后一个同级节点
attributes 获取当前元素节点的所有属性节点集合。
<script>
var btn=document.getElementsByTagName("button");
var ul=document.getElementById("ulk");
// var num=0;
// 点击显示 再点击隐藏
btn[0].onclick = function(){
/* if(num%2==0){
ul.style.display="block";
}else{
ul.style.display="none";
}
num++; */
join("ds","dsf","dsafdaf");
}
function join(){
var arg=arguments;
for(var i=0; i<arg.length;i++){
ul.innerHTML += "<li>"+arg[i]+"</li>"
}
}
// var img=document.getElementsByTagName("img");
// img[0].setAttribute("src","../../imgs/link-icon1.png")
// 1.设置setAttribute 取值getAttribute
// 2.创建元素------
// 3.在页面插入 node.appendChild 插入node的最后面。
// 4.克隆 node.cloneNode() 克隆布尔类型。
// 5. parenNode.insertBefore(newNode,referenceNode) newNode 要插入的节点，referenceNode参考节点（该节点前插入）
// parenNode:父节点，参考节点的父节点，必须要有。
// 6. parenNode.removeChild() 删除子节点。
// 7.parenNode.replaceChild() 替换子节点。
var box=document.getElementById("box");
function newnode(){
var iamg=document.createElement("img");
// 创建成功后就是游离元素
iamg.setAttribute("src","../../imgs/link-icon1.png");
box.appendChild(iamg);
}
// 克隆一张
function copyImg(){
var iamg=document.createElement("img");
// 里面默认是false，只克隆框。
// true的话，还复制里面的所有内容
var copyImg=iamg.cloneNode();
box.appendChild(iamg);
}
newnode();
// 删除
function remove(){
// 删除子节点（都支持）
document.body.removeChild();
// 删除节点
document.body.remove();
}
// 替换
function replace(){
document.body.replaceChild();
}
</script>
练习
<!-- 修改div的多个属性 -->
<script>
var div=document.querySelector("div");
/* // 1..cssText设置
div.style.cssText="color: #5E5EFF; font-size: 50px;"
// 2.根据类名进行设置
div.className="color";
*/
// 如果想保存原来的属性，并添加一些属性
// 同时编写color active的class类。单纯的添加一个类后面再学
div.className ="active";
</script>
练习从一个地方发送数据从另一个地方接受，再从中间文本框进行显示。
<body >
<div class="fl">
<div class="left">
<div class="letf_sen">
<textarea id="te"></textarea>
</div>
<button type="button" class="send" > send</button>
</div>
<div class="center">
sdfa
</div>
<div class="right">
<h1>消息列表 <span></span></h1>
<ul class="meslist">
<!-- 先放出来 -->
<!-- <li><span class="circle"></span>sd</li> -->
</ul>
</div>
</div>
</body>
<script>
var send=document.querySelector(".send");
var text=document.getElementsByTagName("textarea")[0];
var meslist=document.getElementsByClassName("meslist")[0];
send.onclick=function(){
if(text.value==""){
alert("不能为空");
}else{
// meslist.innerHTML+="<li>"+"<img src='imgs/link-icon1.png '/> "+ text.value+"</li>"
var li=document.createElement("li");
li.innerHTML="<span class='circle'></span>" +text.value;
meslist.appendChild(li);
text.value="";
}
/* var item=document.querySelectorAll("ul>li");
//var item= document.getElementsByTagName("li");
for(var i=0;i<item.length;i++){
item[i].οnclick=function(){
this.innerHTML="<li>"+ "<img src='imgs/link-icon2.png '/> "+this.innerText+"</li>"
}
} */
circhange();
}
function circhange(){
var lis=document.querySelectorAll(".meslist>li");
var span=document.querySelectorAll(".circle");
var inner=document.querySelector(".center");
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
this.firstElementChild.style.backgroundColor="blue";
inner.innerText=this.innerText;
}
}
}
</script>
补充：单行显示，多余的东西显示省略号。
.meslist{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
620
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
