1、方法

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

子节点，父节点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<ul>

    <li>节点1</li>阿范德萨发

    <li>节点2</li>

    <li>节点3</li>

    <li>节点4</li></ul>

<script>

    function getChildNode(){

        var childnode = document.getElementsByTagName("ul")[0].childNodes;

        alert(childnode.length);/*空格区域也算一个节点*/

        alert(childnode[1]);/*会打印出节点的类型*/

        alert(childnode[1].innerHTML);/*打印出节点的内容*/

        alert(childnode[2]);/*打印出内容：object Text*/

        alert(childnode[1].nodeType);

    }

    getChildNode();

</script>

</body>

</html>

appendChild,insertBefore

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="div">

    <p id="pid">div的元素</p>

</div>

<script>

    function createNode(){

        var body = document.body;

        var input = document.createElement("input");

        input.type = "button";

        input.value = "按钮";

        body.appendChild(input);/*向body的末尾添加一个元素*/

    }

    function addNode(){

        var div = document.getElementById("div");

        var node = document.getElementById("pid");

        var newnode = document.createElement("p");

        newnode.innerHTML = "动态添加一个p元素";

        div.insertBefore(newnode,node);/*在。。。之前添加一个元素*/

    }

    createNode();

    addNode();

</script>

</body>

</html>

removeNode:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="div">

    <p id="pid">div的元素</p>

</div>

<script>

    function removeNode(){

        var div = document.getElementById("div");

        var p = div.removeChild(div.childNodes[1]);

    }

    removeNode();/*什么都不输出就对了*/

</script>

</body>

</html>

offsetHeight:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="div">

    <p id="pid">div的元素</p>

</div>

<script>

    function getSize(){

        var width = document.documentElement.offsetWidth||document.documentElement.offsetWidth;

        /*这样写会让所有浏览器兼容*/

        var height = document.documentElement.offsetHeight;

        alert(width+","+height);

    }

    getSize();/*什么都不输出就对了*/

</script>

</body>

</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. 廖雪峰Java14Java操作XML和JSON-2JSON-2处理JSON

    解析JSON JSR 353 API 常用的第三方库 * Jackson * gson * fastjson Jackson: 提供了读写JSON的API JSON和JavaBean可以互相转换 可食 ...

  2. Apache Flink 1.9.0版本新功能介绍

    摘要:Apache Flink是一个面向分布式数据流处理和批量数据处理的开源计算平台,它能够基于同一个Flink运行时,提供支持流处理和批处理两种类型应用的功能.目前,Apache Flink 1.9 ...

  3. 报javax.servlet.ServletException: Servlet.init() for servlet [springmvc] threw exception的解决记录

    1.异常详情: 2.异常分析: 从异常的详情中看出:companyService未找到,出现这种情况的愿意可能是companyServiceImpl类没有交给IOC容器管理,但是经过我已经在该类上打了 ...

  4. 莫烦pytorch学习笔记(一)——torch or numpy

    Q1:什么是神经网络? Q2:torch vs numpy Numpy:NumPy系统是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵,比Python自身的嵌套列表(neste ...

  5. some方法过滤

    // 已经存在该tab时跳过 this.tabs.some(item => item.title === option.title) || this.tabs.push(option)

  6. 深入浅出 Java Concurrency (30): 线程池 part 3 Executor 生命周期[转]

    我们知道线程是有多种执行状态的,同样管理线程的线程池也有多种状态.JVM会在所有线程(非后台daemon线程)全部终止后才退出,为了节省资源和有效释放资源关闭一个线程池就显得很重要.有时候无法正确的关 ...

  7. java基础之System类

    System类概述System 类包含一些有用的类字段和方法.它不能被实例化. 成员方法 public static void gc()运行垃圾回收器 public static void exit( ...

  8. 2019-9-2-C＃判断文件属于文本或二进制

    title author date CreateTime categories C#判断文件属于文本或二进制 lindexi 2019-09-02 12:57:37 +0800 2018-2-13 1 ...

  9. [Ceoi2010]Pin

    #2012. [Ceoi2010]Pin Online Judge:Bzoj-2012 Label:容斥,STL 题目描述 给出N(2<=N<=50000)个长度为4的字符串,问有且仅有D ...

  10. THUWC 游记

    考试前的一个周末 PKUWC没过,去不了,自闭,我死了. 考试前的星期一 THUWC居然过了!!!大恩大德永世难忘,我又活了. 考试前的周四 WTF!??为什么要用Ubuntu,我完全不会,凉了凉了, ...