JavaScript DOM 操作

创建并放置新的节点

  1. 获取元素
    // 获取<section>
    var section = document.querySelector('section');
    /*
    querySelector()调用会匹配它在文档中遇到的第一个<section>元素。如果想对多个元素进行匹配和操作,
    你可以使用Document.querySelectorAll(),这个方法匹配文档中每个匹配选择器的元素,并把它们的引用存储在一个array中。
    */
    
  2. Document.createElement() 创建一个新的段落
     var div= document.createElement('div');
     div.textContent = '在section中添加div';
    
  3. Node.appendChild() 方法在后面追加新的段落
        section.appendChild(div);
    
  4. Document.createTextNode() 创建一个文本节点,并文本节点绑定到div节点上
    var text = document.createTextNode('这是文本内容');
    var textDiv= document.querySelector('div');
    textDiv.appendChild(text);
    

移动和删除元素

  1. 把具有内部链接的段落移到sectioin的底部
    section.appendChild(linkPara)
    
  2. Node.cloneNode() 方法返回调用该方法的节点的一个副本
    var dupNode = node.cloneNode(deep);
    node:将要被克隆的节点
    dupNode:克隆生成的副本节点
    deep 可选:是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身.默认值变成了 false
    
  3. 删除节点
    //删除section下的div
    section.removeChild(textDiv);
    
    //要删除一个仅基于自身引用的节点
    textDiv.parentNode.removeChild(textDiv);
    

操作样式

  1. 方法一
     //直接在想要动态设置样式的元素内部添加内联样式。这是用HTMLElement.style属性来实现。 
    textDiv.style.color = 'white';
    textDiv.style.backgroundColor = 'black';
    textDiv.style.padding = '10px';
    textDiv.style.width = '250px';
    textDiv.style.textAlign = 'center';
    
  2. 方法二 通过添加class
    <style>
    	.highlight {
    	  color: white;
    	  background-color: black;
    	  padding: 10px;
    	  width: 250px;
    	  text-align: center;
    	}
    </style>
    <script>
      textDiv.setAttribute('class', 'highlight');
    </script>
    

从Window对象中获取信息

  1. 获取这个div的引用,然后获取视窗(显示文档的内部窗口)的宽度和高度, 并存入变量中 — 这两个值包含在 Window.innerWidthWindow.innerHeight 属性中
    var div = document.querySelector('div');
    var WIDTH = window.innerWidth;
    var HEIGHT = window.innerHeight;
    
  2. 将动态地改变div的宽度和高度,使其等于视窗的宽度和高度
    div.style.width = WIDTH + 'px';
    div.style.height = HEIGHT + 'px';
    
  3. Window 对象有一个称为 resize 的可用事件。每次窗口调整大小时都会触发该事件 — 我们可以通过 Window.onresize 事件处理程序来访问它
    window.onresize = function() {
      WIDTH = window.innerWidth;
      HEIGHT = window.innerHeight;
      div.style.width = WIDTH + 'px';
      div.style.height = HEIGHT + 'px';
    }
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值