1、方法

getElementsByName() 获取name 可以获取一个数组类型数据（参数加引号）
getElementsByTagName() 获取元素  
getAttribute() 获取元素属性 获取元素的变量调用这个方法，（参数为元素属性）
setAttribute() 设置元素属性  
childNodes() 访问子节点 子节点可以有很多个
parentNode() 访问父节点 父节点只有一个
createElement() 创建元素节点  
createTextNode() 创建文本节点  
insertBefore() 插入节点  
removeChild() 删除节点  
offsetHeight()、offsetWidth() 网页尺寸 不包含滚动条的宽度、高度
scrollHeight()、scrollWidth() 网页尺寸 包含滚动条的宽度、高度

子节点，父节点

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <ul>
  9.     <li>节点1</li>阿范德萨发
  10.     <li>节点2</li>
  11.     <li>节点3</li>
  12.     <li>节点4</li></ul>
  13. <script>
  14.     function getChildNode(){
  15.         var childnode = document.getElementsByTagName("ul")[0].childNodes;
  16.         alert(childnode.length);/*空格区域也算一个节点*/
  17.         alert(childnode[1]);/*会打印出节点的类型*/
  18.         alert(childnode[1].innerHTML);/*打印出节点的内容*/
  19.         alert(childnode[2]);/*打印出内容：object Text*/
  20.         alert(childnode[1].nodeType);
  21.     }
  22.     getChildNode();
  23. </script>
  24. </body>
  25. </html>

appendChild,insertBefore

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="div">
  9.     <p id="pid">div的元素</p>
  10. </div>
  11. <script>
  12.     function createNode(){
  13.         var body = document.body;
  14.         var input = document.createElement("input");
  15.         input.type = "button";
  16.         input.value = "按钮";
  17.         body.appendChild(input);/*向body的末尾添加一个元素*/
  18.     }
  19.  
  20.     function addNode(){
  21.         var div = document.getElementById("div");
  22.         var node = document.getElementById("pid");
  23.         var newnode = document.createElement("p");
  24.         newnode.innerHTML = "动态添加一个p元素";
  25.         div.insertBefore(newnode,node);/*在。。。之前添加一个元素*/
  26.     }
  27.     createNode();
  28.     addNode();
  29. </script>
  30. </body>
  31. </html>

removeNode:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="div">
  9.     <p id="pid">div的元素</p>
  10. </div>
  11. <script>
  12.     function removeNode(){
  13.         var div = document.getElementById("div");
  14.         var p = div.removeChild(div.childNodes[1]);
  15.     }
  16.     removeNode();/*什么都不输出就对了*/
  17. </script>
  18. </body>
  19. </html>

offsetHeight:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="div">
  9.     <p id="pid">div的元素</p>
  10. </div>
  11. <script>
  12.     function getSize(){
  13.         var width = document.documentElement.offsetWidth||document.documentElement.offsetWidth;
  14.         /*这样写会让所有浏览器兼容*/
  15.         var height = document.documentElement.offsetHeight;
  16.         alert(width+","+height);
  17.     }
  18.     getSize();/*什么都不输出就对了*/
  19. </script>
  20. </body>
  21. </html>

web前端学习（四）JavaScript学习笔记部分（7）-- JavaScript DOM对象控制HTML元素详解的更多相关文章

  1. javascript - DOM对象控制HTML元素详解

    1.方法   getElementsByName() -- 获取name getElementByTagName() -- 获取  getAttribute()         --获取元素属性 se ...

  2. web前端－－知识点，笔记叠加（javascript,jquery,html5+css3.0,ajax）

    函数传参列表,获取方法arguments的使用 function arg(){ var str = '总共传了'+arguments.length+'个参数\n'; for(var i=0;i< ...

  3. 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

    1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

  4. jQuery 源码解析(二十四) DOM操作模块 包裹元素 详解

    本节说一下DOM操作模块里的包裹元素子模块,该模块可将当前匹配的元素替换指定的DOM元素,有如下方法: wrap(html)               ;在每个匹配元素的外层添加一层DOM元素   ...

  5. Web前端与移动开发学习路线图

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 这里整理的Web前端与移动开发学习路线图包含初中级两个部分,你可以通过百度云盘下载观看对应的视频 链接: http://pan.ba ...

  6. 想做web前端project师应该学习些什么？

    偶然间看到这篇文章.感觉博主写的挺不错的,假设你想做web前端project师的话,建议您阅读下面这篇文章,事实上web前端project师所做的工作事实上就是站点设计,有些小公司的美工事实上就是做w ...

  7. 最全的WEB前端开发程序员学习清单

    史上最全的WEB前端开发程序员学习清单! 今天为什么要给大家分享这篇文章呢,我发现最近来学前端的特别多,群里面整天都有人问:前端好找工作吗?前端要怎么学啊?前端工资怎么样?前端XX,前端XXX,虽然我 ...

  8. web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 规范 HTML结构详解 {前端之前端初识}

    前端之前端初识   前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...

  9. 史上最全web.xml配置文件元素详解

    一.web.xml配置文件常用元素及其意义预览 <web-app> <!--定义了WEB应用的名字--> <display-name></display-na ...

随机推荐

  1. Vagrant box ubuntu/xenial64 添加vagrant用户解决没有登录密码的问题

    参考了Vagrant box ubuntu/xenial64 の ubuntuユーザ の passwordについて 1. 可以通过 Git Bash 使用  vagrant ssh 登录到Ubuntu ...

  2. [JZOJ3296] 【SDOI2013】刺客信条

    题目 题目大意 给你一棵树,树上每个节点有000或111的状态. 用最少的操作次数使得当前状态与目标状态同构. 思考历程 首先想到的是找重心. 因为根是不确定的,但重心只会有一个或两个,以重心为根就能 ...

  3. 廖雪峰Java14Java操作XML和JSON-1XML-3SAX

    SAX:Simple API for XML 基于事件的API import javax.xml.parsers.SAXParser; import javax.xml.parsers.SAXPars ...

  4. Spring Boot 整合 ActiveMQ

    依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spri ...

  5. springboot与任务（邮件任务）

    邮件发送需要引入spring-boot-starter-mail Spring Boot 自动配置MailSenderAutoConfiguration 定义MailProperties内容,配置在a ...

  6. MYSQL常用命令（转）

    1.导出整个数据库mysqldump -u 用户名 -p --default-character-set=latin1 数据库名 > 导出的文件名(数据库默认编码是latin1)mysqldum ...

  7. centos 6.5 yum安装rabbitMQ

    1.查看系统版本, 升级系统基本lib库 [root@test ~]# cat /etc/redhat-release CentOS release 6.5 (Final) [root@test ~] ...

  8. PAT甲级——A1092 To Buy or Not to Buy【20】

    Eva would like to make a string of beads with her favorite colors so she went to a small shop to buy ...

  9. window查看端口信息

    netstat -nao |findstr "2129" 列出所有端口的情况 tasklist|findstr "pid" 查看对应进程信息

  10. 第一次个人项目【词频统计】——测试样例分析&性能分析

    [空文件测试](认为空文件行数为0) [基本测试] [大小写测试] 可以看出abcd同类型的词出现了三次,而单词树中存储的是ABCd,满足大小写要求. [复杂文件测试] 前三项数据比较接近,但是单词和 ...