将所有有关的dom讲解都放在一起来写笔记,这样对连贯性的理解会好一些。
DOM方面的笔记不会按本书的内容来写笔记,会有《javascriptDOM编程艺术》和《javascript模式》这俩本书中的读书笔记。
关注分离
内容
html文档
表现
指定文档的外观的css样式
行为
处理用户交互和文档各种动态变化的javascript
appendChild() 添加
replaceChild() 替换
removeChild() 删除
cloneNode() 创建调用这个方法节点的副本
true 深复制,复制节点及其整个子节点数
false 浅复制,只复制节点本身。
Document类型
getElementById() 要取得的元素id
getElementsByTagName() 取得元素的标签名
getElementsByName() 带有给定name特性的所有元素
文档写入
write() 原样写入
writeIn() 在字符串的末尾添加一个换行符(\n)
open()
close()
Element类型
操作特性
getAttribute()
setAttribute() 要设置的属性名和值
removeAttribute()
创建元素
createElement()
创建文本节点
createTextNode() 要插入节点的文本
DOM扩展
滚动
scrollIntoView(alignWithTop) 滚动浏览器窗口或容器元素 所有浏览器
scrollIntoViewIfNeeded(alignCenter) 只在当前元素在视口中不可见的情况下,才滚动浏览器窗口或容器元素,最终让当前元素可见。 safari chrome
作用的是元素的窗口
scrollByLines(lineCount) 将元素的内容滚动指定的行数的高度。 safari chrome
scrollByPages(pageCount) 将元素的内容滚动指定的页面的高度。 safari chrome
作用的是元素自身
contains()方法
alert(document.documentElement.contains(document.body)); firefox从版本21后开始支持
操作内容
innerText() 处理的是普通文本字符串 firefox不支持
innerHTML() 处理的是html字符串
outerText() 这个节点会修改调用它的元素,不建议使用
outerHTML() 不建议使用
创建表格
var table = document.createElement("table"); table.border = "1"; table.width = "100%"; var tbody = document.createElement("tbody"); table.appendChild(tbody); tbody.insertRow(0); tbody.rows[0].insertCell(0); tbody.rows[0].cells[0].appendChild(document.createTextNode("第一行单元格1")); tbody.rows[0].insertCell(1); tbody.rows[0].cells[1].appendChild(document.createTextNode("第一行单元格2")); tbody.insertRow(1); tbody.rows[1].insertCell(0); tbody.rows[1].cells[0].appendChild(document.createTextNode("第二行单元格1")); tbody.rows[1].insertCell(1); tbody.rows[1].cells[1].appendChild(document.createTextNode("第二行单元格2")); document.body.appendChild(table);
未完待续。。。
相关推荐
NULL 博文链接:https://phoebird.iteye.com/blog/584484
从菜鸟教程上学习的关于js的学习笔记,可以用于参考学习使用,脑图样式,浏览更方便,有需要的同学可以带走
javaScript DOM编程艺术2版学习笔记(1~9)章
3) Node类型: ①Node是DOM中各种节点类型的基类型,共享相同的基本属性和方法。 □ Node.Element_NODE(1); □ Node.ATTRIBUTE_NODE(2); □ Node.TEXT_NODE(3); □ Node.CDATA_SECTION_NODE(4); □ Node.ENTITY_RE
韩顺平js-DOM学习笔记
2、文档对象模型(DOM),提供访问和操作网页内容的方法和接口。 3、浏览器对象模型(BOM),提供与浏览器交互的方法和接口。 第二章 script标签 延迟脚本:定义defer属性,表明脚本在执行时不会影响页面的构造,也...
比较详细的javascript DOM 学习笔记第1 2页.docx
前端学习(六)——javascript学习笔记(四)HTML DOM.xmind
详细的javascript学习笔记,DOM,BOM,AJAX等详细笔记!
JavaScript学习基础知识,对你一定有帮助!!
javascript 数组 DOM BOM简单学习总结
JavaScript_DOM编程 DOM 的常用方法属性 经典实例 浏览器兼容处理
第12章 事件 1.事件流 1.1事件冒泡(IE事件流) □事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播到较为不... 1.3DOM事件流 □“DOM2级事件”规定的
JavaScript DOM编程艺术(中文第二版)学习笔记
javascript为DOM绑定事件 兼容 学习笔记
主要介绍了JavaScript学习笔记之DOM操作,结合实例形式分析了javascript针对dom元素的获取、设置相关操作常用函数使用技巧,需要的朋友可以参考下
韩顺平老师的javascript之dom编程的笔记
这个菜鸟的笔记里面没有谈到JavaScript中的对象,比如说时间对象和字符串对象,这些内容可以在“菜鸟的JavaScript对象笔记”中找到。不过因为小菜鸟个人认为HTML DOM比其它的JavaScript对象更常用一些(不过这可不...
DOM文档对象模型是HTML和XML的应用程序接口(API),DOM将整个页面规划成由节点层次构成的文档。DOM对象给予开发者对HTML的访问权限,并且使开发者能将HTML作为XML文档来处理和查看。DOM对象是与语言无关的API,意味...