JS-Dom概念

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {
 
 var oUl = document.getElementById(‘ul1‘);
 
 /*
  元素.childNodes : 只读 属性 子节点列表集合
   标准下:包含了文本和元素类型的节点,也会包含非法嵌套的子节点
   非标准下:只包含元素类型的节点,ie7以下不会包含非法嵌套子节点
   
   childNodes只包含一级子节点,不包含后辈孙级以下的节点
  
  DOM节点的类型有很多种 12种
  
  元素.nodeType : 只读 属性 当前元素的节点类型
  
  元素节点 : 1
  属性节点 : 2
  文本节点 : 3
 */
 
 alert( oUl.childNodes.length );
 
 //alert( oUl.nodeType );
 
 //alert(oUl.childNodes[0].nodeType);
 
 //属性
 // 元素.attributes : 只读 属性 属性列表集合
 
 //alert( oUl.attributes.length );
 
 //alert( oUl.attributes[0].nodeType );
 
 /*for (var i=0; i<oUl.childNodes.length; i++) {
  
  if ( oUl.childNodes[i].nodeType == 1 ) {
   oUl.childNodes[i].style.background = ‘red‘;
  }
  
 }*/
 
}
</script>
</head>

<body>
 <ul id="ul1" style="border: 1px solid red;">
        <li>11111 <span>span</span></li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
        <p>pppppppp</p>
    </ul>
</body>
</html>

时间: 2024-12-02 13:52:10

JS-Dom概念的相关文章

JS DOM编程艺术的学习—— JS学习笔记2015-7-5(第76天)

由于看高程3卡住了,所以现在在学习JS DOM编程艺术来巩固基础: 一.在看JS DOM 编程艺术的时候,有个作者提到的方法很实用, 就是在JS中变量和函数的命名方法:  变量的命名方法为使用下划线,比如: var temp_color = ['red','blue']; 函数就使用驼峰法,比如: function current_date(){}; 这样的习惯可以帮助理解,提高可读性,在理解变量和函数名的时候就很方便了: 二.还有个收获就是关于“对象”的理解又加深了 之前对于什么对象的属性,对

js DOM 扩展

1. 选择符API querySelector()          返回匹配的第一个元素,接收一个 CSS 选择符.没有找到返回 null. querySelectorAll()      返回所有匹配的一个 NodeList, 这是一个快照不会动态改变.接收一个 CSS 选择符. mathesSelecttor()      如果调用元素与该选择符匹配,返回true, 否则返回 false. 接收一个 CSS 选择符. 2. 与类相关的扩充 getElementsByClassName()

JS DOM编程艺术——JS图片库—— JS学习笔记2015-7-8(第79天)

DOM是一种适用于多种环境和多种程序设计语言的通用型API. 如果想要把本书(JS DOM编程艺术)学到的DOM技巧运用在web浏览器以外的应用环境里,严格遵守“第1级DOM”能够让你避免与兼容性有关的任何问题: tips:setAttribute是第1级DOM; 图片切换初级js: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/

JS DOM(文档对象模型)与BOM(浏览器对象模型)

在JS中,对DOM(Document Object Model)对象和BOM(Browser Object Model )对象的操作是非常重要的内容.DOM主要包括HTML文档的属性和方法,像对HTML节点的操作,CSS的操作和HTML事件的监听和处理.BOM不要包括浏览器相关的一些属性和方法. DOM知识点1.改变页面的元素和属性a.获取元素的方法:document.getElementById()document.getElementsByTagName()document.getEleme

JS DOM 编程艺术 随笔

DOM 最大的作用就是将整个文档通过节点树来展现.通过类似方法可以获取特定节点,并绑定js方法实现与人的交互. 1.通过dom方法,获取页面的元素(getElementsByTagName/id,通过class(getAttribute))2.获取元素之后,为他们绑定行为(点击/其他)的处理事件3.最后把所有函数绑定到window.onload()函数上面去 onload = function(){function1function2...} plus 小技巧: <a onclick=>函数

js Dom 编程

1. 节点及其类型:  1). 元素节点  2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作.  3). 文本节点: 是元素节点的子节点, 其内容为文本.   2. 在 html 文档的什么位置编写 js 代码?    0). 直接在 html 页面中书写代码.   <button id="button" onclick="alert('hello world');">Click Me!</button>   缺点:    ①.

JS &amp; DOM 对象

22:36 2013/6/4 详情参照W3C文档标准 Browser 对象(顶层对象) DOM Window DOM Navigator DOM Screen DOM History DOM Location HTML DOM 对象 DOM Document DOM Anchor DOM Area DOM Base DOM Body DOM Button DOM Canvas DOM Event DOM Form DOM Frame DOM Frameset DOM IFrame DOM Ima

JS基础概念

JS基础概念 1. 算法及流程图 算法类型:1.算数算法:2.事务性算法(解决某个问题的方法和先后顺序). JS语法概述 1. 引入JS的方法 1.用<script src=""></script>引入外部JS文件:2.使用<script></script>标签嵌入网页,一般放在head内,也可放在body内,但要保证调用前已被读取加载到内存内:3.直接作为某个标签的事件代码. 2. 标识符(命名) 1.区分大小写:2.第一个字符可以为任

JS Dom节点操作demo!

通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ return document.createElement(tagName); } var table = c('table'); var tbody = c('tbody'); table.appendChild(tbody); for(var i = 0;i<4;i++){ var tr = c(

关于React库的纯JS DOM的单向可视化?

[技术讨论]React库据说是用JS模拟了DOM,其可视化是单向流向的,所以性能比DOM要好(DOM的getComputedStyle或者会触发reflow的style获取?),但这不是意味着这个JS DOM需要实现所有的影响layout的CSS属性设置操作? 如果真的实现了的话,岂不是JS完全重新实现了WebCore layout引擎了 其实DOM的本质也是单向的,并不存在一个单独的UI反馈设备,当设置了元素的CSS属性并经过layout排版后,元素的大小位置都是根据一个模型计算出来的,只不过