前端之HTML DOM

节点概念

DOM把所有的html都转换为节点
整个文档 是一个节点
元素 是节点
元素属性 是节点
元素内容 是节点
注释 也是节点

<div id="d1">hello HTML DOM</div>
<script>
var  div1 = document.getElementById("d1");
p("文档节点"+document);
p("元素"+div1);
p("属性节点"+div1.attributes[0]);
p("内容节点"+div1.childNodes[0]);
</script>

获取节点

方法功能
document.getElementById通过id获取元素节点
getElementsByTagName通过标签名称获取元素节点
getElementsByClassName通过类名获取元素节点
getElementsByName通过表单元素的name获取元素节点
attributes获取属性节点
childNodes获取内容节点

DOM样式

DOM事件

事件简介
onfocus ,onblur焦点事件 (获取,丢失)
onmousedown,onmouseup,onmouseover,onmousemove,onmouseout鼠标事件 (按下,松开,经过,进入,退出)
onkeydown,onkeypress,onkeyup键盘事件 (按下,按下,弹起)
onclick,ondblclick点击事件
onchange变化事件
onsubmit提交事件
onload加载事件
this当前组件
return false阻止事件的发生

onkeydown
可以获取所有键,除了打印键Prts
可以获取用户是否点击了修饰键 (ctrl,shift,alt)
不能判断输入的是大写还是小写
onkeypress
只能获取字符键
不能获取用户是否点击了修饰键 (ctrl,shift,alt)
可以判断输入的是大写还是小写

节点关系

parentNode父节点关系
previousSibling,nextSibling同胞节点关系
childNodes子节点关系
<div id="parentDiv">
 <div id="d1">第一个div</div>
 <div id="d2">第二个div</div>
 <div id="d3">第三个div</div>
</div>

创建节点

createElement 创建元素节点

<div id="d">Hello HTML DOM</div>
<button onclick="add()">在div中追加一个hr元素</button>
<script>
function add(){
  var hr=document.createElement("hr");
  var div1 = document.getElementById("d");
  div1.appendChild(hr);
}
</script>

createTextNode 创建文本节点

<div id="d">Hello HTML DOM</div>
<script>
function add(){
 
  var p=document.createElement("p");
  var text = document.createTextNode("这是通过DOM创建出来的<p>");
  p.appendChild(text);
 
  var div1 = document.getElementById("d");
  div1.appendChild(p);
 
}
</script>
  
<button onclick="add()">在div中追加一个p元素</button>

createAttribute 创建属性节点

<div id="d">Hello HTML DOM<br></div>
<script>
function add(){ 
  var a=document.createElement("a");
  var content = document.createTextNode("http://yellow.com");
  a.appendChild(content);

  var href = document.createAttribute("href");
  href.nodeValue="http://yellow.com";
  a.setAttributeNode(href);

  var div1 = document.getElementById("d");
  div1.appendChild(a);
}
</script>
<button onclick="add()">在div中追加一个超链</button>

删除节点

removeChild 删除元素节点
要删除某个元素节点有两步
第一:先获取该元素的父节点
第二:通过父节点,调用removeChild 删除该节点

<div id="parentDiv">
  <div id="div1">安全的div</div>
  <div id="div2">即将被删除的div</div>
</div>
<button onclick="removeDiv()">删除第二个div</button>
<script>
function removeDiv(){
  var parentDiv = document.getElementById("parentDiv");
  var div2= document.getElementById("div2");
  parentDiv.removeChild(div2);
}
</script>

removeAttribute 删除属性节点
第一:先获取该元素节点
第二:元素节点,调用removeAttribute删除指定属性节点

<script>
<a id="link" href="http://12306.com">http://12306.com</a>
<br>
<button onclick="removeHref()">删除超链的href属性</button>
function removeHref(){
  var link= document.getElementById("link");
  link.removeAttribute("href");
}
</script>

removeChild 删除文本节点
第一:通过childNodes[0] 获取文本节点
注:children[0] 只能获取第一个子元素节点,不能获取文本节点
第二:通过removeChild删除该文本节点
但是这种方式比较麻烦,一般都是直接通过innerHTML设置为空即可。
注: 通过innerHTML=""的方式,同样会导致文本子节点被删除。

<div id="parentDiv"> 这里是文本</div>
<button onclick="removeDiv1()">通过removechild删除div下的文本节点</button>
<button onclick="removeDiv2()">通过innerHTML让内容置空</button>
<button onclick="recover()">恢复内容</button>

<script>
function removeDiv1(){
  var parentDiv = document.getElementById("parentDiv");
  var textNode = parentDiv.childNodes[0];
  parentDiv.removeChild(textNode);
}

function removeDiv2(){
  var parentDiv = document.getElementById("parentDiv");
  parentDiv.innerHTML="";
}

function recover(){
  var parentDiv = document.getElementById("parentDiv");
  parentDiv.innerHTML="这里是文本 ";
}
</script>

替换节点

replaceChild
与删除节点一样,替换节点也需要先获取父节点,然后通过父节点替换子节点。

  1. 获取父节点
  2. 创建子节点
  3. 获取被替换子节点
  4. 通过replaceChild进行替换
    注: replaceChild 第一个参数是保留的节点,第二个参数是被替换的节点
<div id="parentDiv">
 <div id="d1">第一个div</div>
 <div id="d2">第二个div</div>
 <div id="d3">第三个div</div>
</div>
 
<script>
 
function replaceDiv(){
  var d4=  document.createElement("div");
  var text = document.createTextNode("第四个div");
 
  d4.appendChild(text);
 
  var d3 = document.getElementById("d3");
 
  var parentDiv = document.getElementById("parentDiv");
 
  parentDiv.replaceChild(d4,d3);
}

</script>
 
<button onclick="replaceDiv()">替换第3个div</button>

插入节点

appendChild 追加节点
通过appendChild追加节点。 追加节点一定是把新的节点插在最后面

  1. 创建新节点
  2. 获取父节点
  3. 通过appendChild追加

insertBefore 在前方插入节点
有时候,需要在指定位置插入节点,而不是只是追加在后面。
这个时候就需要用到insertBefore

  1. 创建新节点
  2. 获取父节点
  3. 获取需要加入的子节点
  4. 通过insertBefore插入
    注: insertBefore的第一个参数是新元素,第二个参数是插入位置
<div id="parentDiv">
 <div id="d1">第一个div</div>
 <div id="d2">第二个div</div>
 <div id="d3">第三个div</div>
</div>
<button onclick="appendDiv()">追加第4个div</button>
<button onclick="insertDiv()">在第二和第三之间,插入第二点五个div</button>

<script>
function appendDiv(){
  var d4=  document.createElement("div");
  var text = document.createTextNode("第四个div");
  d4.appendChild(text);
  
  var parentDiv = document.getElementById("parentDiv");
  
  parentDiv.appendChild(d4);
} 
</script>
  

<script>
function insertDiv(){
  var d25=  document.createElement("div");
  var text = document.createTextNode("第二点五个div");
  d25.appendChild(text);
  
  var parentDiv = document.getElementById("parentDiv");
  var d3 = document.getElementById("d3");
  
  parentDiv.insertBefore(d25,d3);
} 
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值