高程三 DOM对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<style>
button{
display: inline-block;
}
</style>
</head>
<body>
<!-- 写在前面:文档节点是每个文档的根节点,<html>元素称之为文档元素,在这个网页中是文档节点的唯一子节点 -->
<!-- 在html中文档元素始终都是<html>元素 而在XML中,任何元素都可能成为文档元素 -->
<p>linbudu</p>
<p class="para">insert the node</p>
<button style="background-color:lightskyblue;" onclick="ale()">A Button</button>
<script>
var somenode = document.getElementsByTagName("p")[0];
//返回HTMLCollection对象,这个对象有一个方法叫做namedItem(),使用这个方法可以通过元素的name特性取得集合中的项
var nodeList = somenode.childNodes;
var textnode = nodeList[0];
var textnode_1 = nodeList.item(1);//等于上面的获取方法
// var arr = [1,2,3];
console.log(nodeList);//NodeList,类数组,可通过方括号语法访问其值,同时有length属性,但其原型指向NodeList对象 不是Array的实例
//同时,NodeList是有生命有呼吸的对象,会随着DOM结构的变化自动反映
// console.log(arr);//原型指向Array
console.log(textnode);//"linbudu",获取到了文本节点
console.log(textnode.parentNode,textnode.previousSibling,textnode.nextSibling);//等于somenode,null null 返回前一个与后一个兄弟节点
console.log(somenode,somenode.firstChild,somenode.lastChild);// "linbudu"*2
console.log(somenode.nodeType);//
console.log(textnode.nodeType);//
console.log(textnode.nodeName,textnode.nodeValue);// #text linbudu
console.log(somenode.nodeName,somenode.nodeValue);// p null
console.log(textnode.hasChildNodes());//false 比去获取childnode再获取长度更有效的判断有无子节点
console.log(textnode.ownerDocument);//#document 所有节点都有这个属性 ,指向整个文档的文档节点
// console.log(Node.ELEMENT_NODE);//1 元素节点
// console.log(Node.ATTRIBUTE_NODE);//2
// console.log(Node.TEXT_NODE);//3
// console.log(Node.DOCUMENT_NODE);//9
//Node类型中定义了12个数值常量 来表示不同的节点类型
//
//将NodeList对象转换为数组
var transNL = Array.prototype.slice.call(nodeList,0);
// call()方法复习,call(新作用域,参数),0是传给Array.prototype.slice方法的
console.log(transNL);
//以上这些关系指针都是只读的,如果还要操作DOM节点,需要用到一些DOM方法
var insert = document.querySelector(".para");
console.log(insert);//实时变化的NodeList~
var child = document.createElement("p");
insert.appendChild(child);
var child2 = document.createTextNode("before ");
var childp = document.createElement("p");
childp.appendChild(child2);//最好是这样
insert.insertBefore(childp,insert.firstChild);
// insert.replaceChild(newNode,oldNode); 会将被替换的节点从文档树中移除 变成一个孤儿文档
// insert.removeChild(insert.lastChild); 也是变成孤儿
// insert.removeChild(childp); var clone_deep = insert.cloneNode(true);
var clone_shallow = insert.cloneNode(false);
console.log(clone_deep.childNodes);//NodeList(3) 深复制 连带着子节点一起复制
console.log(clone_shallow.childNodes);//NodeList(0) 浅复制 只复制这个节点 //normalize()方法 处理空文本节点、并列的两个文本节点 //document类型
var html = document.documentElement;
var body = document.body;
console.log(html);//给力
console.log(html.nodeType,html.nodeName,html.nodeValue,html.childNodes);//1 HTML null
//!返回的NodeList是 head text body 这个text是nodeValue: "↵",即换行
console.log(body.childNodes);//text(回车) comment text(回车) comment
document.title = "New Title";//可读可操作的一个属性
var url = document.URL;//url
var domain = document.domain;//域名
var referer = document.referer;//来源页面的url
console.log(url,domain,referer);
//只有domain可以设置 但不可设置为url中不包含的域 //document对象的特殊集合
//docuemnt.anchors返回文档中所有带有name特性的<a>元素
//.forms 文档中所有的form元素
//.images
//.links 文档中所有带href特性的a元素 //Element类型
//nodeName 与 tagName 两个属性会返回相同的值
// 操作特性的三个DOM方法 详见DOM编程艺术
function ale(){
alert("siguoyi");
}
var btn = document.getElementsByTagName("button")[0];
console.log(btn.getAttribute("style"));//background-color:lightskyblue;
console.log(btn.style);//CSSStyleDeclaration (只是行内样式)返回一个对象 并没有映射到style特性
console.log(btn.getAttribute("onclick"));//ale()
console.log(btn.onclick);//ƒ onclick(event) {ale()}
//所以通常不使用getA方法 btn.setAttribute("background-color","white");//错误
btn.setAttribute("style","background-color:white;");//正确 //createA方法:
var newAttr = document.createAttribute("alt");
//Attr对象的value与nodeValue相等
newAttr.value = "none";
btn.setAttributeNode(newAttr);
// 要将新特性添加到元素中必须使用该方法
console.log(btn.attributes["alt"].value);//none
console.log(btn.getAttributeNode("alt").value);//none //这两个返回对应特性的Attr结点
console.log(btn.getAttribute("alt"));//none
//只返回对应特性的值
//Attr、Text、Comment、CDATASection、DF、DT等先忽略
</script>
</body>
</html>
高程三 DOM对象的更多相关文章
- Web自动化测试 三 ----- DOM对象和元素查找
一.DOM对象 DOM(Document Object Model文档对象模型):将HTML的各种元素映射为JS可访问的对象.HTML文档中的所有内容都是节点,这些东西在HTML中我们称为元素. 整个 ...
- WebKit JavaScript Binding添加新DOM对象的三种方式
一.基础知识 首先WebKit IDL并非完全遵循Web IDL,只是借鉴使用.WebKit官网提供了一份说明(WebKitIDL),比如Web IDL称"operation”(操作), 而 ...
- 前端之JavaScript:JS之DOM对象三
js之DOM对象三 一.JS中for循环遍历测试 for循环遍历有两种 第一种:是有条件的那种,例如 for(var i = 0;i<ele.length;i++){} 第二种:for ...
- 锋利的jQuery--jQuery与DOM对象的互相转换,DOM的三种操作(读书笔记一)
1.jQuery对象就是通过jQuery包装DOM对象后产生的对象. 2.jQuery对象和DOM对象的相互转换. 良好的书写风格: var $input=$("input" ...
- dom对象详解--document对象(三)
form对象 form对象代表一个HTML表单,在HTML文档中<form>每出现一次,form对象就会被创建.从dom对象层次图看,document.forms对象是当前文档所有for ...
- javaScript操作DOM对象(看三遍,敲三遍,写三遍! 不会你找我)!!
DOM是Document Object Model的缩写,即文档对象模型,是基于文档编程的一套API 使用javaScript操作DOM对象通常分为三类:1.DOM CORE 2.HTM ...
- [jQuery]jQuery和DOM对象(三)
iQuery和DOM对象 用原生js获取来的对象就是DOM对象 // 1. DOM对象 var myDiv = document.get.querySelector('div'); // myDiv ...
- JavaScript实现DOM对象选择器
目的: 根据传入的选择器类型选出第一个符合的DOM对象. ①可以通过id获取DOM对象,例如 $("#adom"); ②可以通过tagName获取DOM对象,例如 $(" ...
- JavaScript 对象、DOM对象、jquery对象的区别、转换详解
一.JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 访问对象的属性: [javascrip ...
随机推荐
- DataGridView之DataError
解决思路一: private void dgvChargeList_DataError(object sender, DataGridViewDataErrorEventArgs e) { bool ...
- TCP/IP学习20180626-数据链路层
数据链路层有三个目的: 为IP模块发送和 接收IP数据报. 为ARP模块发送ARP请求和接收ARP应答. 为RARP发送RARP请 求和接收RARP应答 ip大家都听说过. ARP叫做地址解析协议,是 ...
- Lucene - CustomScoreQuery 自定义排序
在某些场景需要做自定义排序(非单值字段排序.非文本相关度排序),除了自己重写collect.weight,可以借助CustomScoreQuery. 场景:根据tag字段中标签的数量进行排序(tag字 ...
- 新版appium 支持name定位的方法(没试 记录再此)
查找路径:appium-desktop\resources\app\node_modules\appium\node_modules\appium-android-driver\build\lib 修 ...
- 科学-天文学-天文观测站:TMT(红外天文望远镜)
ylbtech-科学-天文学-天文观测站:TMT(红外天文望远镜) 30米望远镜(Thirty Meter Telescope,TMT) 系由美国加州大学和加州理工学院负责研制的新一代地基巨型光学-红 ...
- webpack + vuejs(都是1.0的版本) 基本配置(一)
开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack12.Vue.js13.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在 ...
- Sublime下MarkDown插件实现编辑和实时预览并转换成HTML格式
最近在使用markdown做笔记,编辑器Sublime Text3用起来很轻巧,现在让他支持markdown的语法并且可以实时预览. 安装准备——安装Package Control Package C ...
- 知识点:Mysql 基本用法之触发器
触发器 使用触发器可以定制用户对表进行[增.删.改]操作时前后的行为 注意:没有查询 一 .创建触发器 触发器基础语法: # 插入前 CREATE TRIGGER tri_before_insert_ ...
- Shiro ini配置
Shiro.ini配置: ini配置文件类似Java中的properties(key = value),不过提供了key/value分类的特性,每个部分的key不重复即可 在eclipse中设置打开方 ...
- 有关于Integer的一些小问题
先看一小段源码: Integer a1=; Integer a2=; Integer b1=); Integer b2=); Integer c1=; Integer c2=; System.out. ...