1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.      <title></title>
  6.      <meta charset="utf-8" />
  7.  </head>
  8.  <body>
  9.      <ul>
  10.          <li id="html">html</li>
  11.          <li id="css">css</li><li id="js">js</li>
  12.      </ul>
  13.      <script type="text/javascript">
  14.          //访问指定元素
  15.          var html = document.getElementById("html"); //通过ID获取对象
  16.          html.style.fontWeight = "bold";//改变元素的样式
  17.          var arr = document.getElementsByTagName("li"); //通过标签获取对象的集合
  18.          alert(arr.length); //共有3个
  19.      </script>
  20.  
  21.      <script type="text/javascript">
  22.          //访问相关的元素
  23.          var elm = document.lastChild; //获取文档的最后一个子节点(html)标记
  24.          document.write(elm.nodeName + "<br/>");
  25.  
  26.          var body = elm.lastChild; //获取(html)的(最后一个子节点)body标记
  27.          document.write(body.nodeName + "<br/>"); //最后一个子节点
  28.  
  29.          var head = elm.firstChild;//获取(html)的(第一个子节点)head标记
  30.          document.write(head.nodeName + "<br/>"); //第一个子节点
  31.  
  32.          var ul = body.childNodes[1]; //获取(body)的子节点数组 ul标记
  33.          document.write(ul.nodeName+"<br/>");//数组第1个元素的名字
  34.  
  35.          var li1 = ul.childNodes[1]; //获取ul下的子节点数组第一个 li标记
  36.          document.write(li1.nodeName + "<br/>");//数组第1个元素的名字
  37.  
  38.          var text1 = li1.nextSibling; //获取li1后一个兄弟节点
  39.          document.write(text1.nextSibling.nodeName + "<br/>");//数组第个元素的名字 li   //li与li之间必须紧挨着 否则未定义
  40.          //默认把换行当成元素; 两次获取兄弟元素
  41.      </script>
  42.  
  43.      <div id="div1"></div>
  44.      <script type="text/javascript">
  45.          //追加元素
  46.          var div1 = document.getElementById("div1");//当前节点
  47.          var newH1 = document.createElement("h1");//创建元素节点(h1标签)
  48.          var newText = document.createTextNode("abcdefghijk");//创建文本节点
  49.          newH1.appendChild(newText);//将文本节点添加到 (h1中)
  50.          div1.appendChild(newH1); //将新建元素节点添加到<div>中 (作为最后一个节点)
  51.      </script>
  52.  
  53.      <div id="div2">
  54.          <p id="p1">段落1</p>
  55.          <p id="p2">段落2</p>
  56.      </div>
  57.      <script type="text/javascript">
  58.          //插入元素
  59.          var newPara = document.createElement("p");//创建元素节点
  60.          var newText = document.createTextNode("新段落");
  61.          newPara.appendChild(newText);//将文本节点添加到 p中
  62.          var myDiv = document.getElementById("div2"); //获取父节点
  63.          var para2 = document.getElementById("p2"); //指定插入位置的节点
  64.          myDiv.insertBefore(newPara, para2);//插入指定节点值前 (p2前)
  65.      </script>
  66.  
  67.      <div id="div3">
  68.          <p id="p11">段落11</p>
  69.          <p id="p12">段落12</p>
  70.      </div>
  71.      <script type="text/javascript">
  72.          //替换元素
  73.          var newH1 = document.createElement("h1"); //创建节点h1
  74.          var newText = document.createTextNode("标题1");//创建文本节点
  75.          newH1.appendChild(newText);//将文本节点添加到h1节点中
  76.          var myDiv = document.getElementById("div3");//获取父节点
  77.          var para1 = document.getElementById("p11"); //获取替换的节点
  78.          myDiv.replaceChild(newH1,para1); //把段落p11替换为标题1
  79.      </script>
  80.  
  81.      <div id="div4">
  82.          <p id="p21">段落21</p>
  83.          <p id="p22">段落22</p>
  84.      </div>
  85.      <script type="text/javascript">
  86.          //删除子节点
  87.          var myDiv = document.getElementById("div4");//获取父节点
  88.          var para1 = document.getElementById("p21");//指定要删除的节点
  89.          myDiv.removeChild(para1);//删除指定的子节点
  90.      </script>
  91.  
  92.      <div id="div5"></div>
  93.      <script type="text/javascript">
  94.          //元素的属性与内容操作
  95.          var myDiv = document.getElementById("div5");//获取元素对象
  96.          myDiv.innerHTML = "<h1>asdfghjk<h1>";//设置元素里面的html内容
  97.          myDiv.setAttribute("style","width:380px;height:80px;border:1px solid #000;"); //为元素设置新的属性
  98.      </script>
  99.  
  100.      <div id="div6"></div>
  101.      <div id="div7"></div>
  102.      <script type="text/javascript">
  103.          //style属性
  104.          var myDiv = document.getElementById("div6");
  105.          myDiv.style.width = "200px";
  106.          myDiv.style.height = "50px";
  107.          myDiv.style.border = "1px solid #000";//设置div6的样式
  108.          var myDiv1 = document.getElementById("div7");
  109.          myDiv1.style = "width:200px;height:50px;border:1px solid #000;background-color:#000"; //设置div7的样式
  110.          //javascript不允许在属性或方法名称里使用连字符;例如background-Color; 因此需要调整书写格式backgroundColor;连字符后面用大写
  111.      </script>
  112.  
  113.      <div id="div8"></div>
  114.      <script type="text/javascript">
  115.          //className属性
  116.          var myDiv = document.getElementById("div8");//获取div8对象
  117.          myDiv.className = "a"; //更改样式<div id="div8" class ="a"></div>
  118.          myDiv.className = "b"; //更改样式<div id="div8" class ="b"></div>
  119.      </script>
  120.  </body>
  121.  </html>
  1. <script>
  2.     (function () { document.getElementsByTagName("body")[].style.cssText = "overflow:hidden"; }) ();
  3. </script>

js DOM 节点树 设置 style 样式属性的更多相关文章

  1. 013——VUE中多种方式使用VUE控制style样式属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. Vue 设置style样式

    1.直接添加行内样式 2.通过绑定设置style样式 3.将vue的属性设置为样式 4将多个vue属性设置为样式 <div id="box"> <!--直接添加样 ...

  3. childNodes遍历DOM节点树

    childNodes遍历DOM节点树 var s = ""; function travel(space,node) { if(node.tagName){ s += space ...

  4. DOM节点树和元素树--深度遍历

    我们在阅读JS高级程序设计的时候,提到了节点树的概念.比如说: elem.parentNode---找elem的父节点: elem.childNodes---找elem的所有的直接子节点: elem. ...

  5. CSS如何设置列表样式属性

    列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...

  6. CSS如何设置列表样式属性，看这篇文章就够用了

    列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...

  7. JS Dom节点操作demo!

    通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...

  8. JS DOM节点增删改查 属性设置

    一.节点操作 增 createElement(name)创建元素 appendChild();将元素添加   删 获得要删除的元素 获得它的父元素 使用removeChild()方法删除 改 第一种方 ...

  9. js | javascript获取和设置元素的属性

    获取和设置元素的内容: var nv = document.getElementById("pid"); alert(nv.innerHTML); nv.innerHTML=&qu ...

随机推荐

  1. （41）Spring Boot 使用Java代码创建Bean并注册到Spring中【从零开始学Spring Boot】

    已经好久没有讲一些基础的知识了,这一小节来点简单的,这也是为下节的在Spring Boot中使用多数据源做准备. 从Spring 3.0开始,增加了一种新的途径来配置Bean Definition,这 ...

  2. [luoguP3275] [SCOI2011]糖果（差分约束）

    传送门 差分约束裸题 但是坑! 有一个点是长为10W的链,需要逆序加边才能过(真是玄学) 还有各种坑爹数据 开longlong ——代码 #include <cstdio> #includ ...

  3. hdu_1232_畅通工程_201403091018

    畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  4. MySQL：解决MySQL无法启动的问题

    MySQL无法启动的原因有多种,这里是我遇到的一种情况和解决方法. 起因: 最近项目需要使用MySQL,于是想在MAC上安装一个本地的数据库,但是其实忘了已经安装过一个版本了,结果发现新的服务器怎么也 ...

  5. 使用Keras编写GAN的入门

    使用Keras编写GAN的入门 GAN Time: 2017-5-31 前言 代码 reference 前言 主要参考了网页[1]的教程,同时主要算法来自Ian J. Goodfellow 的论文,算 ...

  6. python 使用scapy编写DNS Fuzzer

    1. 描写叙述 使用scapy库,编写一个DNS Fuzzer工具,并測试.在这之前.先说明一下DNS协议请求包是封装在IP包中的UDP包(有些情况也可使用TCP)中.且UDP的端口为53. 进入sc ...

  7. ajax——dom基础

    javascript中dom实现能够使我们在ajax中通过javascript代码对html和xml数据进行dom方式操作,从而做到页面的动态改动更新和数据的提取处理. dom概念 dom文档对象模型 ...

  8. 《Java程序猿面试笔试宝典》之字符串创建与存储的机制是什么

    在Java语言中.字符串起着非常关键的数据.字符串的声明与初始化主要有例如以下两种情况:(1) 对于String s1=new String("abc")语句与String s2= ...

  9. 高阶MapReduce_1_链接多个MapReduce作业

    链接MapReduce作业 1.      顺序链接MapReduce作业 顺序链接MapReduce作业就是将多个MapReduce作业作为生成的一个自己主动化运行序列,将上一个MapReduce作 ...

  10. android測试工具MonkeyRunner--google官网翻译

    近期在复习之前的笔记,在回想MonkeyRunner时看了看google官网的内容,写得不错.就翻译出来分享下.事实上google官网真是一个学习的好地方. 基础知识 MonkeyRunner工具提供 ...