<!DOCTYPE html>

 <html>

 <head lang="en">

     <meta chaset="UTF-8">

     <title></title>

 </head>

 <body>

     <p name="pname">Hello</p>

     <p name="pname">Hello</p>

     <p name="pname">Hello</p>

     <p name="pname">Hello</p>

     <p name="pname">Hello</p>

     <a name="pname">Hello</a>

     <a id="aid" title="获取a标签的属性成功">aaaaaaa</a>

     <a id="aid2">aid2</a>

     <ul><li>1</li><li>2</li><li>3</li></ul>  <!--设置一个ul节点,包含三个li子节点-->

     <div id="div">

         <p id="pid">div的p元素</p>  <!--设置一个p节点，它的父节点是div-->

     </div>

     <script>

         //通过名字查找元素查找并修改其内容

         getName();

         function getName(){

             var count = document.getElementsByName("pname");  //计算名为pname的节点一共多少个

             alert("id=pname的标签个数："+count.length);

             var p = count[1];

             p.innerHTML = "World";  //通过下标改变标签的内容

         }

         //通过id查找并获取节点属性内容

         getAttr();

         function getAttr(){

             var anode = document.getElementById("aid");//获取id=aid的节点

             var attr = anode.getAttribute("title"); //获取title属性的内容

             alert(attr);

         }

         //通过id查找并动态设置标签属性

         setAttr();

         function setAttr(){

             var anode = document.getElementById("aid2");//获取id=aid2的节点

             anode.setAttribute("title","动态设置a的title属性");//动态设置title属性

             var attr = anode.getAttribute("title");//获取查看title属性的内容，看是否设置成功

             alert(attr);

         }

         //通过标签名查找节点并获取子节点个数

         getChileNode();

         function getChileNode(){

             var childnode = document.getElementsByTagName("ul")[0].childNodes;//获取标签名为ul的节点的子节点

             alert("ul子节点个数："+childnode.length);//计算子节点的个数

         }

         //通过子节点获取父节点

         getParentNode();

         function getParentNode(){

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

             alert(div.parentNode.nodeName);//通过子节点获取父节点

         }

         //动态添加节点

         createNode();

         function createNode(){

             var body = document.body;

             var input = document.createElement("input"); //动态添加节点

             input.type = "button";

             input.value = "动态添加的按钮";//创建一个按钮

             body.appendChild(input);

         }

         //在特定的位置动态添加一个p元素

         //addNode();

         function addNode(){

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

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

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

             newnode.innerHTML = "在特定的位置动态添加一个p元素";

             div.insertBefore(newnode,node);

         }

         //删除节点

         removeNode();

         function removeNode(){

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

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

         }

         //网页尺寸

         getSize();

         function getSize(){

             //offsetWidth，offsetHeight获取不包含滚动条的页面宽和高

             var width = document.documentElement.offsetWidth;

             var height = document.documentElement.offsetHeight;

             alert("不包含滚动条的页面宽和高:"+width+","+height);

             //scrollWidth，scrollHeight获取不包含滚动条的页面宽和高

             var width1 = document.documentElement.scrollWidth;

             var height1 = document.documentElement.scrollHeight;

             alert("包含滚动条的页面宽和高:"+width1+","+height1);

         }

     </script>

 </body>

 </html>

javascript学习笔记（九）：DOM操作HTML的各种方法使用的更多相关文章

  1. jQuery学习笔记之DOM操作、事件绑定（2）

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  2. javascript学习笔记之DOM与表单

    DOM(文档对象模型),猫叔了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...

  3. jQuery学习笔记（DOM操作）

    DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...

  4. javascript学习笔记之DOM

    DOM(文档对象模型),描述了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...

  5. JavaScript学习笔记之DOM介绍

    目录 1.简介 2.方法 3.属性 4.访问节点 5.修改节点 6.添加节点 7.删除节点 8.替换节点 9.改变 CSS 1.简介 文档对象模型(Document Object Model,DOM) ...

  6. JavaScript 学习笔记-HTML&&DOM

    HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. JavaScript 能够 ...

  7. JavaScript学习笔记之DOM对象

    目录 1.Document 2.Element 3.Attribute 4.Event 1.Document 每个载入浏览器的 HTML 文档都会成为 Document 对象,Document 对象允 ...

  8. 1.4（JavaScript学习笔记） window对象的属性及方法

    一.window对象 window对象代表当前窗口,所有全局对象都是windows的属性, 例如document是window的属性,window.document.writer("&quo ...

  9. JavaScript学习笔记：数组的indexOf()和lastindexOf()方法

    https://www.w3cplus.com/javascript/array-part-6.html

  10. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

随机推荐

  1. Linux实用命令整理

    说明 点击标题可进入详细讲解的章节 0. 基本命令 linux 基本命令整理 1. 压缩 解压 tar -zcvf a.tar.gz a #把a压缩成a.tar.gz tar -zxvf a.tar. ...

  2. 学python的第二天

    我是一个有一点点c语言基础的大二学生,今天的积累 cd指令=change directory(目录) dir=查看当前目录文件列表 convert   转化   defind  定义 cd ..   ...

  3. winform 布局、容器

    一.布局 属性:1.Anchor:  绑定控件到容器边缘位置保持不变 注:四周全锁定时控件随界面变化时变大 2.Dock:绑定到容器的边缘 注:下控件到边需先将下控件定义到边再将左右控件新建.到边 3 ...

  4. react-native react-navigation StackNavigator android导航栏 标题下居中

    navigationOptions:({ navigation }) => ({ , textAlign:'center' }}) 如上设置即可,如果有返回箭头,那么右边也要加一个 占位的或者设 ...

  5. ECharts 的用法

    1. ECharts的获得 官网: https://echarts.baidu.com/ 你可以通过以下几种方式获取 ECharts. 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求 ...

  6. 死无对证：tomcat7 + 中文cookie + goLang

    查了下资料,很多人遇到这个问题,但是goLang使用得相对少 java.lang.IllegalArgumentException: Control character in cookie value ...

  7. beego orm 时间相差八小时

    使用beego框架,前端调用api插入一条数据到mysql,时间差了8个小时,fuck!!! 解决办法: 在db的url后面加上时区- dbDataSource = root:test@tcp(192 ...

  8. day19-高阶函数、匿名函数

    map 函数 map 是一个在 Python 里非常有用的高阶函数.它接受一个函数和一个序列(迭代器)作为输入,然后对序列(迭代器)的每一个值应用这个函数,返回一个序列(迭代器),其包含应用函数后的结 ...

  9. Win2008R2配置WebDeploy(转)

    一.配置服务器 1.安装管理服务 2.点击管理服务进行配置 3.安装WebDeploy 3.1通过离线安装包方式安装: https://www.iis.net/downloads/microsoft/ ...

  10. Linux命令:sshpass

    sshpass介绍 sshpass是一款凡是为凡是使用ssl方式访问的操作提供一个免输入密码的非交互式操作,以便于在脚本中执行ssl操作,如ssh,scp等.sshpass是一家以色列公司Lingnu ...