javascript学习笔记（九）：DOM操作HTML的各种方法使用
<!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的各种方法使用的更多相关文章
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- javascript学习笔记之DOM与表单
DOM(文档对象模型),猫叔了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...
- jQuery学习笔记（DOM操作）
DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...
- javascript学习笔记之DOM
DOM(文档对象模型),描述了一个层次化的节点树 一.DOM NODE相关公共属性与方法 DOM中所有节点都实现了NODE接口,该接口的公共属性和方法如下: 1.节点基本属性 1)NodeType 节 ...
- JavaScript学习笔记之DOM介绍
目录 1.简介 2.方法 3.属性 4.访问节点 5.修改节点 6.添加节点 7.删除节点 8.替换节点 9.改变 CSS 1.简介 文档对象模型(Document Object Model,DOM) ...
- JavaScript 学习笔记-HTML&&DOM
HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. JavaScript 能够 ...
- JavaScript学习笔记之DOM对象
目录 1.Document 2.Element 3.Attribute 4.Event 1.Document 每个载入浏览器的 HTML 文档都会成为 Document 对象,Document 对象允 ...
- 1.4（JavaScript学习笔记） window对象的属性及方法
一.window对象 window对象代表当前窗口,所有全局对象都是windows的属性, 例如document是window的属性,window.document.writer("&quo ...
- JavaScript学习笔记：数组的indexOf()和lastindexOf()方法
https://www.w3cplus.com/javascript/array-part-6.html
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
随机推荐
- 寻找cost函数最小值：梯度下降与最小二乘法
Editted by MarkDown 寻找cost函数最小值:梯度下降与最小二乘法 参考:最小二乘法小结--刘建平 背景: 目标函数 = Σ(观测值-理论值)2 观测值就是我们的多组样本,理论值就是 ...
- 《算法》第六章部分程序 part 7
▶ 书中第六章部分程序,加上自己补充的代码,包括全局最小切分 Stoer-Wagner 算法,最小权值二分图匹配 ● 全局最小切分 Stoer-Wagner 算法 package package01; ...
- Linux关键字查询
grep -R "查询关键字" /目录/*
- ClassNotFoundException: javax.validation.ValidatorFactory
spring mvc 程序. 浏览器一访问controller 则出现: ClassNotFoundException: javax.validation.ValidatorFactory ... 很 ...
- MVC基于角色权限控制--权限过滤
用户访问服务器实际上就是访问控制器下的方法,因此在权限控制就是控制器方法的访问权限 为了方便控制,我们可以建立一个基类控制器(BaseController),让需要的控制器继承这个控制器即可,在Bas ...
- 机器学习进阶-案例实战-答题卡识别判 1.cv2.getPerspectiveTransform(获得投射变化后的H矩阵) 2.cv2.warpPerspective(H获得变化后的图像) 3.cv2.approxPolyDP(近似轮廓) 4.cv2.threshold(二值变化) 7.cv2.countNonezeros(非零像素点个数)6.cv2.bitwise_and(与判断)
1.H = cv2.getPerspectiveTransform(rect, transform_axes) 获得投射变化后的H矩阵 参数说明:rect表示原始的位置左上,右上,右下,左下, tra ...
- Oracle保留两位小数的函数
1.最终保存成字符串类型 使用to_char()函数 // 其9代表:如果存在数字则显示数字,不存在则显示空格 // 其0代表:如果存在数字则显示数字,不存在则显示0,即占位符 // 其FM代表:删除 ...
- Rocket MQ 问题排查命令
修改rocketmq官方代码测试: package com.alibaba.middleware.race.rocketmq; import java.util.Scanner; import com ...
- linux内核中的const成员是否可以修改?
本文的基础知识:由于前半部分内容是转的,且不知道原文出处,没法给出原文地址,大家自行百度 const的实现机制 const究竟是如何实现的呢?对于声明为const的内置类型,例如int,short,l ...
- vue启动时报错，node-modules下xxx缺失
从qq上拷贝了一个项目,解压后打开进vscode,安装依赖与scss后启动,显示node-modules下xxx指向缺失(想不起来是哪个缺失了),在网上找了很多解决办法,包括重新安装node 与 np ...